Как проверить переключатель с помощью 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);

Не работает:

У тебя есть другая идея? Что мне не хватает?

Alexis
источник
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")

Он возвращает истину или ложь, так что вы можете использовать его в выражении «если».

Karbaman
источник
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

JohnP
источник
7

Если собственность nameне работает, не забывайте, что она idвсе еще существует. Этот ответ для людей, которые хотят нацелить idздесь, как вы делаете.

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

Потому что собственность nameне работает для меня. Убедитесь, что вы не окружаете idи nameдвойными / одинарными кавычками.

Ура!

Анжана Силва
источник
7

Да, у меня получилось так:

$("#radio_1").attr('checked', 'checked');
Анжан Кант
источник
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();
apatsekin
источник
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);
UWU_SANDUN
источник
5

На всякий случай, если кто-то пытается достичь этого при использовании пользовательского интерфейса jQuery, вам также необходимо обновить объект флажка пользовательского интерфейса, чтобы отразить обновленное значение:

$("#option2").prop("checked", true); // Check id option2
$("input[name='radio_options']").button("refresh"); // Refresh button set
freeworlder
источник
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>

volitilov
источник
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>
Saroj
источник
3

Попробуй это

var isChecked = $("#radio_1")[0].checked;
user2190046
источник
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');
dominicbri7
источник
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>
venkatskpi
источник
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
Uniform - это плагин jQuery, который делает формы красивее, но делает это путем добавления дополнительных элементов. Всякий раз, когда я обновляю проверенное значение, состояние дополнительного элемента не обновляется, что приводит к невидимому вводу, который не проверяется, но с видимым фоновым элементом, который выглядит проверенным. jQuery.uniform.update()это решение!
Денилсон Са Майя
1

Попробуй это:

$(document).ready(function(){
  $("#Id").prop("checked", true).checkboxradio('refresh');
});
user3721473
источник
Это не будет работать без включения файла для checkboxradioплагина, что бессмысленно, когда вы можете просто использовать встроенные функции jQuery для этого (см. Принятый ответ).
Натан
1

У меня просто есть похожая проблема, простое решение - просто использовать:

.click()

Любое другое решение будет работать, если вы обновите радио после вызова функции.

user3148673
источник
1
щелчок вызова иногда является головной болью в ie9
Astolfo Hoscher
1

attr принимает две строки.

Правильный путь:

jQuery("#radio_1").attr('checked', 'true');
Коко Монсеф
источник