как установить опцию радио, проверенную onload с помощью jQuery

Как установить опцию радио, проверенную onload с помощью jQuery?

нужно проверить, не установлено ли значение по умолчанию, а затем установить значение по умолчанию

15 ответов


скажем, у вас были такие переключатели, например:

<input type='radio' name='gender' value='Male'>
<input type='radio' name='gender' value='Female'>

и вы хотели проверить один со значением "мужской" onload, если радио не проверено:

$(function() {
    var $radios = $('input:radio[name=gender]');
    if($radios.is(':checked') === false) {
        $radios.filter('[value=Male]').prop('checked', true);
    }
});

Как насчет одного лайнера?

$('input:radio[name="gender"]').filter('[value="Male"]').attr('checked', true);

это вызовет форме.сброс() ошибка:

$('input:radio[name=gender][value=Male]').attr('checked', true);

но это работает:

$('input:radio[name=gender][value=Male]').click();

JQuery имеет фактически два способа установить проверенный статус для радио и флажков, и это зависит от того, используете ли вы атрибут value в разметке HTML или нет:

если у них есть атрибут value:

$("[name=myRadio]").val(["myValue"]);

если у них нет атрибута value:

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

Более Подробная Информация

в первом случае мы указываем всю радиогруппу, используя имя, и говорим JQuery найти радио, чтобы выбрать с помощью функции val. Функция val принимает массив 1 элемента и находит радио с соответствующим значением, устанавливает его checked=true. Другие с таким же именем будут отменены. Если радио с соответствующим значением не найдено, все будут отменены. Если есть несколько радиостанций с тем же именем и значением, то будет выбран последний, а другие будут отменены.

Если вы не используете атрибут value для радио, вам нужно использовать уникальный идентификатор для выбора конкретного радио в группе. В этом случае вам нужно использовать функцию prop для установки " проверено" свойство. Многие люди не используют атрибут value с флажками, поэтому #2 более применим для флажков, чем радио. Также обратите внимание, что поскольку флажки не образуют группу, когда они имеют одно имя, вы можете сделать $("[name=myCheckBox").prop("checked", true); для галочки.

вы можете играть с этим кодом здесь:http://jsbin.com/OSULAtu/1/edit?html, выход


мне понравился ответ @Amc. Я обнаружил, что выражение может быть сконденсировано дальше, чтобы не использовать вызов filter () (@chaiko, по-видимому, также заметил это). Кроме того, prop () - это способ пойти против attr() для jQuery v1.6+, смотрите документация jQuery для prop () для официальной передовой практики по этому вопросу.

рассмотрим те же входные теги из ответа @Paolo Bergantino.

<input type='radio' name='gender' value='Male'>
<input type='radio' name='gender' value='Female'>

обновленный однострочный может читать что-то вроде:

$('input:radio[name="gender"][value="Male"]').prop('checked', true);

Я думаю, вы можете предположить, что имя уникально, и все радио в группе имеет одно и то же имя. Затем вы можете использовать поддержку jQuery следующим образом:

$("[name=gender]").val(["Male"]);

Примечание: передача массива важна.

версия с кондиционером:

if (!$("[name=gender]:checked").length) {
    $("[name=gender]").val(["Male"]);
}

Если вы хотите, чтобы он был действительно динамическим и выберите радио, соответствующее входящим данным, это работает. Он использует гендерное значение данных, переданных или использует значение по умолчанию.

if(data['gender'] == ''){
 $('input:radio[name="gender"][value="Male"]').prop('checked', true);
}else{
  $('input:radio[name="gender"][value="' + data['gender'] +'"]').prop('checked', true);
};

собственное решение JS:

 document.querySelector('input[name=gender][value=Female]').checked = true;

http://jsfiddle.net/jzQvH/75/

HTML-код:

<input type='radio' name='gender' value='Male'> Male
<input type='radio' name='gender' value='Female'>Female

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

Jquery:

var priority = Model.Priority; //coming for razor model in this case
var allInputIds = "#slider-vertical-" + itemIndex + " fieldset input";

$(allInputIds).val([priority]); //Select at start up

и html:

<div id="@("slider-vertical-"+Model.Id)">
 <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
    <input type="radio" name="@("radio-choice-b-"+Model.Id)" id="@("high-"+Model.Id)" value="1" checked="checked">
    <label for="@("high-"+Model.Id)" style="width:100px">@UIStrings.PriorityHighText</label>

    <input type="radio" name="@("radio-choice-b-"+Model.Id)" id="@("medium-"+Model.Id)" value="2">
    <label for="@("medium-"+Model.Id)" style="width:100px">@UIStrings.PriorityMediumText</label>

    <input type="radio" name="@("radio-choice-b-"+Model.Id)" id="@("low-"+Model.Id)" value="3">
    <label for="@("low-"+Model.Id)" style="width:100px">@UIStrings.PriorityLowText</label>
 </fieldset>
</div>

Не нужно все это. С помощью простого и старого HTML вы можете достичь того, чего хотите. Если вы позволите радио, которое вы хотите проверить по умолчанию, как это:
<input type='radio' name='gender' checked='true' value='Male'>
Когда страница загрузится, она будет проверена.


 $("form input:[name=gender]").filter('[value=Male]').attr('checked', true);

вот пример с вышеуказанными методами:

<div class="ui-field-contain">
<fieldset data-role="controlgroup" data-type="horizontal">    <legend>Choose a pet:</legend>
    <input type="radio" name="radio-choice-2" id="radio-choice-1" value="choice1">
    <label for="radio-choice-1">Cat</label>

    <input type="radio" name="radio-choice-2" id="radio-choice-2" value="choice2">
    <label for="radio-choice-2">Dog</label>

    <input type="radio" name="radio-choice-2" id="radio-choice-3" value="choice3">
    <label for="radio-choice-3">Hamster</label>

    <input type="radio" name="radio-choice-2" id="radio-choice-4" value="choice4">
    <label for="radio-choice-4">Lizard</label>
  </fieldset>
</div>

в javascript:

$("[name = 'radio-choice-2'][value='choice3']").prop('checked', true).checkboxradio('refresh');

Примечание такого поведения при получении радио-входные значения:

$('input[name="myRadio"]').change(function(e) { // Select the radio input group

    // This returns the value of the checked radio button
    // which triggered the event.
    console.log( $(this).val() ); 

    // but this will return the first radio button's value,
    // regardless of checked state of the radio group.
    console.log( $('input[name="myRadio"]').val() ); 

});

Так $('input[name="myRadio"]').val() не возвращается проверил значение входного радио, как и следовало ожидать, она возвращает значение первого переключателя.


//Если вы делаете это на javascript или фреймворке, таком как backbone, вы столкнетесь с этим много у вас может быть что-то вроде этого

$MobileRadio = $( '#mobileUrlRadio' );

пока

$MobileRadio.checked = true;

не работает

$MobileRadio[0].checked = true;

будет.

ваш выбор может быть, как и другие ребята выше тоже рекомендовали.


De esta forma Jquery obtiene solo el elemento checked

$('input[name="radioInline"]:checked').val()