Как установить параметр радио, установленный onload с помощью jQuery?
Необходимо проверить, не установлено ли по умолчанию значение, а затем установить значение по умолчанию
Как установить параметр радио, установленный onload с помощью jQuery?
Необходимо проверить, не установлено ли по умолчанию значение, а затем установить значение по умолчанию
Скажите, что у вас есть такие радиокнопки, например:
<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);
}
});
Как насчет одного лайнера?
$('input:radio[name="gender"]').filter('[value="Male"]').attr('checked', true);
Это вызовет ошибку form.reset():
$('input:radio[name=gender][value=Male]').attr('checked', true);
Но это работает:
$('input:radio[name=gender][value=Male]').click();
JQuery фактически имеет два способа установить статус проверки для радио и флажков, и это зависит от того, используете ли вы атрибут value в разметке HTML или нет:
$("[name=myRadio]").val(["myValue"]);
$("#myRadio1").prop("checked", true);
В первом случае мы определяем всю группу радиостанций, используя имя, и сообщаем JQuery, чтобы найти радио для выбора с помощью функции val. Функция val принимает 1-элементный массив и находит радио с соответствующим значением, устанавливает его checked = true. Другие с тем же именем будут отменены. Если радио с соответствующим значением не найдено, то все будут отменены. Если есть несколько радиостанций с одинаковым именем и значением, тогда будет выбран последний, а другие будут отменены.
Если вы не используете атрибут value для радио, вам нужно использовать уникальный идентификатор для выбора определенного радио в группе. В этом случае вам нужно использовать функцию prop, чтобы установить свойство "checked". Многие люди не используют атрибут value с флажками, поэтому # 2 больше применим для флажков, а затем для радиостанций. Также обратите внимание, что поскольку флажки не образуют группу, если у них одинаковое имя, вы можете сделать $("[name=myCheckBox").prop("checked", true);
для флажков.
Вы можете играть с этим кодом здесь: http://jsbin.com/OSULAtu/1/edit?html,output
Мне понравился ответ @Amc. Я обнаружил, что выражение может быть сжато дальше, чтобы не использовать вызов filter() (по-видимому, это заметил и @chaiko). Кроме того, prop() - это путь к vs 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;
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 value,
// regardless of checked state of the radio group.
console.log( $('input[name="myRadio"]').val() );
});
Итак, $('input[name="myRadio"]').val()
не возвращает проверенное значение радиовхода, как и следовало ожидать - оно возвращает первое значение переключателя.
//Если вы делаете это на javascript или фреймворке, таком как позвоночник, вы столкнетесь с этим много вы могли бы что-то вроде этого
$MobileRadio = $( '#mobileUrlRadio' );
а
$MobileRadio.checked = true;
не будет работать,
$MobileRadio[0].checked = true;
будет.
ваш селектор может быть таким же, как и другие ребята, выше рекомендуемые.
De esta forma Jquery obtiene соло el elemento проверил
$('input[name="radioInline"]:checked').val()
Это работает для нескольких переключателей
$('input:radio[name="Aspirant.Gender"][value='+jsonData.Gender+']').prop('checked', true);