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

Question

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

Необходимо проверить, не установлено ли значение по умолчанию, а затем установить значение по умолчанию

Answer 1

Скажем, у вас были такие радио-кнопки, например:

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

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

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

Answer 2

Как насчет одного вкладыша?

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

Answer 3

Это приведет к ошибке form.reset ():

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

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

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

Answer 4

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

Если они имеют атрибут value:

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

Если у них нет атрибута значения:

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

Подробнее

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

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

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

Answer 5

Мне понравился ответ @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);

Answer 6

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

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

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

Условная версия:

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

Answer 7

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

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

Answer 8

Собственное решение 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

Answer 9

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

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>

Answer 10

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

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