Як перевірити перемикач за допомогою jQuery?


889

Я намагаюся перевірити перемикач на jQuery. Ось мій код:

<form>
    <div id='type'>
        <input type='radio' id='radio_1' name='type' value='1' />
        <input type='radio' id='radio_2' name='type' value='2' />
        <input type='radio' id='radio_3' name='type' value='3' /> 
    </div>
</form>

І JavaScript:

jQuery("#radio_1").attr('checked', true);

Не працює:

jQuery("input[value='1']").attr('checked', true);

Не працює:

jQuery('input:radio[name="type"]').filter('[value="1"]').attr('checked', true);

Не працює:

У вас є інша ідея? Що я пропускаю?


1
Дякуємо за ваші відповіді! Я знайшов проблему. Насправді два перших способи зробити це - це працює. Справа в тому, що я використовував jqueryUI для перетворення набору з 3 радіо кнопок у набір кнопок із цим кодом: jQuery ("# ​​тип"). Набір кнопок (); але внесення цієї зміни до перевірки радіо порушило радіоприймач (не знаю чому). Нарешті, я поклав дзвінок на набір кнопок після перевірки радіо, і він працює бездоганно.
Олексій

Використовуйте $ ("input: radio [value = '2']"). Prop ('перевірено', правда); посилання тут freakyjolly.com/…
Code Spy

Відповіді:


1469

Для версій jQuery, рівних або вище (> =) 1.6, використовуйте:

$("#radio_1").prop("checked", true);

Для версій до (<) 1.6 використовуйте:

$("#radio_1").attr('checked', 'checked');

Порада. Ви також можете потім зателефонувати click()або change()переключити радіо. Перегляньте коментарі для отримання додаткової інформації.


80
У jQuery 1.9 або вище це рішення не працюватиме. Використовуйте $ ("# radio_1"). Prop ("перевірено", правда); замість цього.
installero

12
@Installero насправді prepє правильним з 1.6 та потрібним з 1.9.
Джон Дворак

42
Це корисно додати .change()до кінця, щоб викликати будь-які інші події на сторінці.
Фоксинні

13
Було б розумно перевпорядкувати цю відповідь так, що .propявно є правильною відповіддю, а .attrметод є приміткою до jQuery <1.6.
Патрік

22
Якщо ви хочете, щоб інші радіо кнопки радіогрупи оновились належним чином$("#radio_1").prop("checked", true).trigger("click");
Пол ЛеБо

256

Спробуйте це.

У цьому прикладі я націлюю його на ім'я та значення введення

$("input[name=background][value='some value']").prop("checked",true);

Добре знати: у випадку багатозначного значення воно буде працювати і через апострофи.


5
Це, мабуть, найкращий спосіб, інші мають тенденцію триматися там, роблячи цю функцію марною вдруге, тоді як це працює так, як очікувалося
Рой Толедо

Виявив, що оскільки існує лише одна, яку можна вибрати, $ ('input [name = "type"]: перевірено'). Val () також добре.
huggie

Будь ласка, докладно. Загальна ідея полягає у тому, щоб перевірити радіо-кнопку, адресуючи її атрибутами - ім'ям та необов'язково значенням. Я не впевнений, що ви намагаєтеся досягти з цим, оскільки є лише атрибут name та: перевірений псевдоселектор. І ви також отримуєте вал, що досить заплутано. Спасибі
Володимир Джуричич

2
Я збирався піти "id" на всі мої радіо, але цей метод спрацював бездоганно. Але майте на увазі, що коли ваше значення має багатослівне слово (скажімо, "кольоровий фіолетовий"), вам потрібно буде включити відповідні цитати: $("input[name=background][value='color purple']").prop("checked",true);
Трістан Тао,

3
Набагато краще, ніж обрана відповідь! Саме те, що я шукав. Це загальний характер, тоді як обрана відповідь конкретна. Дивовижне, спасибі
GarbageGigo

96

Ще одна функція prop (), яка додається в jQuery 1.6, яка служить тій самій цілі.

$("#radio_1").prop("checked", true); 

13
attr('checked', true)перестав працювати для мене з JQuery 1.9, це рішення!
Паскаль

1
Здається, що prop("checked", true)працює, attr('checked', 'checked')чи не так
Томаш Кутер

@TomaszKuter Я рекомендую використовувати prop (), оскільки перевірена властивість DOM - це те, що повинно вплинути на поведінку - але це дивно - у цій скрипці ( jsfiddle.net/KRXeV ) attr('checked', 'checked')насправді працює x)
jave.web

ось гарна неоднозначність stackoverflow.com/questions/5874652/prop-vs-attr
code_monk

81

Короткий і простий для читання варіант:

$("#radio_1").is(":checked")

Він повертає істинне або хибне, тож ви можете використовувати його в операторі "якщо".


5
Дякую! Це те, що я шукав, але (FYI) ОП запитував, як встановити перемикач, а не отримати значення. (Слово "перевірка" зробило питання заплутаним.)
Бампфер

31

Спробуйте це.

Щоб перевірити перемикач за допомогою значення, скористайтеся цією функцією.

$('input[name=type][value=2]').attr('checked', true); 

Або

$('input[name=type][value=2]').attr('checked', 'checked');

Або

$('input[name=type][value=2]').prop('checked', 'checked');

Для перевірки радіо-кнопки за допомогою ідентифікатора використовуйте це.

$('#radio_1').attr('checked','checked');

Або

$('#radio_1').prop('checked','checked');


13

$.propСпосіб краще:

$(document).ready(function () {                            
    $("#radio_1").prop('checked', true);        
});

і ви можете протестувати його так:

$(document).ready(function () {                            
    $("#radio_1, #radio_2", "#radio_3").change(function () {
        if ($("#radio_1").is(":checked")) {
            $('#div1').show();
        }
        else if ($("#radio_2").is(":checked")) {
            $('#div2').show();
        }
        else 
            $('#div3').show();
    });        
});

9

Ви повинні робити

jQuery("#radio_1").attr('checked', 'checked');

Це атрибут HTML


7

Якщо майно nameне працює, не забувайте, що idвсе ще існує. Ця відповідь призначена для людей, які хочуть орієнтуватися на idте, як ви робите.

$('input[id=element_id][value=element_value]').prop("checked",true);

Тому що власність nameдля мене не працює. Переконайтесь, що ви не оточуєте idтаname подвійні / одинарні пропозиції.

Ура!



6

Спробуйте це

$(document).ready(function(){
    $("input[name='type']:radio").change(function(){
        if($(this).val() == '1')
        {
          // do something
        }
        else if($(this).val() == '2')
        {
          // do something
        }
        else if($(this).val() == '3')
        {
          // do something
        }
    });
});

6

Дивно, але найпопулярніша і прийнята відповідь ігнорує запуск відповідної події, незважаючи на коментарі. Переконайтеся, що ви посилаєтесь .change() , інакше всі прив’язки "на зміну" проігнорують цю подію.

$("#radio_1").prop("checked", true).change();

5
$("input[name=inputname]:radio").click(function() {
    if($(this).attr("value")=="yes") {
        $(".inputclassname").show();
    }
    if($(this).attr("value")=="no") {
        $(".inputclassname").hide();
    }
});

5

Отримайте значення:

$("[name='type'][checked]").attr("value");

Встановлене значення:

$(this).attr({"checked":true}).prop({"checked":true});

Клацніть радіо, натисніть кнопку "Додати attr":

$("[name='type']").click(function(){
  $("[name='type']").removeAttr("checked");
  $(this).attr({"checked":true}).prop({"checked":true});
});

5

Ми хочемо сказати, що це radioкнопка. Тому, будь ласка, спробуйте з наступним кодом.

$("input[type='radio'][name='userRadionButtonName']").prop('checked', true);

5

На випадок, якщо хтось намагається цього досягти під час використання інтерфейсу jQuery, вам також потрібно буде оновити об'єкт прапорця для інтерфейсу, щоб відобразити оновлене значення:

$("#option2").prop("checked", true); // Check id option2
$("input[name='radio_options']").button("refresh"); // Refresh button set

4

Я використовую цей код:

Вибачте за англійську.

var $j = jQuery.noConflict();

$j(function() {
    // add handler
    $j('#radio-1, #radio-2').click(function(){

        // find all checked and cancel checked
        $j('input:radio:checked').prop('checked', false);

        // this radio add cheked
        $j(this).prop('checked', true);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="section">
  <legend>Radio buttons</legend>
  <label>
    <input type="radio" id="radio-1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
  <br>
  <label>
    <input type="radio" id="radio-2">
    Option two can be something else
  </label>
</fieldset>


4

Спробуйте це на прикладі

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<input type="radio" name="radio" value="first"/> 1 <br/>
<input type="radio" name="radio" value="second"/> 2 <br/>
</form>


<script>
$(document).ready(function () {
    $('#myForm').on('click', function () {
        var value = $("[name=radio]:checked").val();

        alert(value);
    })
});
</script>


3
function rbcitiSelction(e) {
     debugger
    $('#trpersonalemail').hide();
    $('#trcitiemail').show();
}

function rbpersSelction(e) {
    var personalEmail = $(e).val();
    $('#trpersonalemail').show();
    $('#trcitiemail').hide();
}

$(function() {  
    $("#citiEmail").prop("checked", true)
});

2
$("#radio_1").attr('checked', true);
//or
$("#radio_1").attr('checked', 'checked');

2
$("#radio_1").attr('checked', true);це не спрацює. Як згадується в ОП
JohnP

2
Будь-ласка, поясніть код у своїх відповідях та прочитайте питання (це було випробувано)
SomeKittens

2

У мене з’явився приклад, який слід покращити, як щодо того, якщо я хочу додати нову умову, скажімо, якщо я хочу, щоб кольорова схема була прихована після того, як я натискаю на значення статусу проекту, за винятком бруківки та тротуарної плитки.

Приклад наведено тут:

$(function () {
    $('#CostAnalysis input[type=radio]').click(function () {
        var value = $(this).val();

        if (value == "Supply & Lay") {
            $('#ul-suplay').empty();
            $('#ul-suplay').append('<fieldset data-role="controlgroup"> \

http://jsfiddle.net/m7hg2p94/4/


2

Крім того, ви можете перевірити, перевіряється чи ні елемент:

if ($('.myCheckbox').attr('checked'))
{
   //do others stuff
}
else
{
   //do others stuff
}

Ви можете перевірити наявність неперевіреного елемента:

$('.myCheckbox').attr('checked',true) //Standards way

Ви також можете зняти прапорець таким чином:

$('.myCheckbox').removeAttr('checked')

Ви можете перевірити наявність перемикача:

Для версій jQuery, рівних або вище (> =) 1.6, використовуйте:

$("#radio_1").prop("checked", true);

Для версій до (<) 1.6 використовуйте:

$("#radio_1").attr('checked', 'checked');

2

Я використовував jquery-1.11.3.js

Основні Увімкнути та вимкнути

Поради 1: (Тип перемикача загальний Вимкнути та увімкнути)

$("input[type=radio]").attr('disabled', false);
$("input[type=radio]").attr('disabled', true); 

Поради 2: (Вибір ідентифікатора за допомогою prop () або attr ())

$("#paytmradio").prop("checked", true);
$("#sbiradio").prop("checked", false);

jQuery("#paytmradio").attr('checked', 'checked'); // or true this won't work
jQuery("#sbiradio").attr('checked', false);

Поради 3: (Вибір класу за допомогою prop () або arrt ())

$(".paytm").prop("checked", true);
$(".sbi").prop("checked", false);

jQuery(".paytm").attr('checked', 'checked'); // or true
jQuery(".sbi").attr('checked', false);

ІНШІ ПОРАДИ

$("#paytmradio").is(":checked")   // Checking is checked or not
$(':radio:not(:checked)').attr('disabled', true); // All not check radio button disabled

$('input[name=payment_type][value=1]').attr('checked', 'checked'); //input type via checked
 $("input:checked", "#paytmradio").val() // get the checked value

index.html

<div class="col-md-6">      
    <label class="control-label" for="paymenttype">Payment Type <span style="color:red">*</span></label>
    <div id="paymenttype" class="form-group" style="padding-top: inherit;">
        <label class="radio-inline" class="form-control"><input  type="radio" id="paytmradio"  class="paytm" name="paymenttype" value="1" onclick="document.getElementById('paymentFrm').action='paytmTest.php';">PayTM</label>
        <label class="radio-inline" class="form-control"><input  type="radio" id="sbiradio" class="sbi" name="paymenttype" value="2" onclick="document.getElementById('paymentFrm').action='sbiTest.php';">SBI ePAY</label>
    </div>
</div>

2

Використовуйте prop () mehtod

введіть тут опис зображення

Посилання на джерело

<p>
    <h5>Radio Selection</h5>

    <label>
        <input type="radio" name="myRadio" value="1"> Option 1
    </label>
    <label>
        <input type="radio" name="myRadio" value="2"> Option 2
    </label>
    <label>
        <input type="radio" name="myRadio" value="3"> Option 3
    </label>
</p>

<p>
    <button>Check Radio Option 2</button>
</p>


<script>
    $(function () {

        $("button").click(function () {
            $("input:radio[value='2']").prop('checked',true);
        });

    });
</script>

1

спробуйте це

 $("input:checked", "#radioButton").val()

якщо перевірені повернення, True якщо не відмічені поверненняFalse

jQuery v1.10.1

1

Деякі рази вище рішення не працюють, то ви можете спробувати нижче:

jQuery.uniform.update(jQuery("#yourElementID").attr('checked',true));
jQuery.uniform.update(jQuery("#yourElementID").attr('checked',false));

Ще один спосіб спробувати:

jQuery("input:radio[name=yourElementName]:nth(0)").attr('checked',true);

1
Уніформа - це плагін jQuery, який робить форми красивішими, але це робить, додаючи додаткові елементи. Щоразу, коли я оновлюю перевірене значення, стан додаткового елемента не оновлюється, що призводить до невидимого вводу, який не перевіряється, але з видимим фоновим елементом, який виглядає перевіреним. jQuery.uniform.update()це рішення!
Denilson Sá Maia

1

Спробуйте це:

$(document).ready(function(){
  $("#Id").prop("checked", true).checkboxradio('refresh');
});

Це не спрацює, не включаючи файл для checkboxradioплагіна, що безглуздо, коли ви можете просто використовувати вбудовані функції jQuery для цього (див. Прийнятий відповідь).
Натан

1

У мене просто є подібна проблема. Просте рішення - просто використовувати:

.click()

Будь-яке інше рішення спрацює, якщо оновити радіо після функції дзвінка.


1
Клацання дзвінка іноді є головним болем у ie9
Astolfo Hoscher

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.