Как проверить переключатель с помощью jQuery?


890

Я пытаюсь проверить переключатель с помощью 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 ("# ​​type"). Buttonset (); но внесение этого изменения перед проверкой радио сломало радиоприемник (не знаю почему). Наконец, я проверил вызов кнопки после проверки радио, и она работает безупречно.
Алексис

Используйте $ ("input: radio [value = '2']"). Prop ('checked', true); ссылка здесь freakyjolly.com/…
Code Spy

Ответы:


1470

Для версий jQuery, равных или выше (> =) 1.6, используйте:

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

Для версий до (<) 1.6 используйте:

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

Совет: Вы также можете позвонить click()или change()включить переключатель позже. Смотрите комментарии для получения дополнительной информации.


80
В jQuery 1.9 или выше это решение не будет работать. Используйте $ ("# radio_1"). Prop ("флажок", true); вместо.
installero

12
На самом деле, @Installero prepявляется верным с версии 1.6 и обязательным с версии 1.9.
Джон Дворак

43
Это полезно добавить .change()в конец, чтобы вызвать любые другие события на странице.
Foxinni

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"]: checked'). Val () также хорош.
Хагги

Пожалуйста, дополните. Общая идея заключается в проверке переключателя, который обращается к нему с его атрибутами - именем и, необязательно, значением. Я не уверен, что вы пытаетесь сделать с этим, так как есть только имя атрибута и: используется проверенный псевдо-селектор. И вы тоже получаете val, что довольно странно. Спасибо
Владимир Джуричич

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
Спасибо! Это то, что я искал, но (к вашему сведению) ОП спрашивал, как установить переключатель, а не получить значение. (Слово «чек» поставило вопрос в замешательство.)
Bampfer

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});

Переключатель радио нажмите добавить атрибут проверено:

$("[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

У меня есть некоторый связанный пример, который должен быть улучшен, например, если я хочу добавить новое условие, скажем, если я хочу, чтобы цветовая схема была скрыта после того, как я щелкнул по значению статуса проекта, кроме Pavers и Paving Slabs.

Пример здесь:

$(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: (Тип переключателя общий Disable & Enable)

$("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

Несколько раз вышеуказанные решения не работают, тогда вы можете попробовать ниже:

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
Uniform - это плагин jQuery, который делает формы красивее, но делает это путем добавления дополнительных элементов. Всякий раз, когда я обновляю проверенное значение, состояние дополнительного элемента не обновляется, что приводит к невидимому вводу, который не проверяется, но с видимым фоновым элементом, который выглядит проверенным. jQuery.uniform.update()это решение!
Денилсон Са Майя

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.