Як встановити перевірену опцію радіопередачі за допомогою jQuery?
Потрібно перевірити, чи не встановлено значення за замовчуванням, а потім встановити за замовчуванням
Як встановити перевірену опцію радіопередачі за допомогою 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);
}
});
$radios.removeAttr('checked')
перед опорою. Це сплутає браузер і розміщені значення.
Як щодо одного лайнера?
$('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 насправді є два способи встановлення встановленого статусу радіо та прапорців, і це залежить від того, використовуєте ви атрибут значення у розмітці HTML чи ні:
$("[name=myRadio]").val(["myValue"]);
$("#myRadio1").prop("checked", true);
У першому випадку ми вказуємо всю радіогрупу за допомогою імені та повідомляємо JQuery знайти радіо для вибору за допомогою функції val. Функція val приймає 1-елементний масив і знаходить радіо з відповідним значенням, встановлює його check = true. Інших осіб з такою ж назвою буде знято. Якщо радіо з відповідним значенням не знайдено, все буде відмінено. Якщо є декілька радіостанцій з одним іменем та значенням, тоді буде вибрано останнє, а інші будуть зняті з вибору.
Якщо ви не використовуєте атрибут value для радіо, вам потрібно використовувати унікальний ідентифікатор для вибору конкретного радіо в групі. У цьому випадку вам потрібно скористатися функцією підтримки, щоб встановити властивість "зареєстровано". Багато людей не використовують атрибут значення з прапорцями, тому №2 більше застосований для прапорців, ніж для радіо. Також зауважте, що прапорці не утворюють групи, коли вони мають однакове ім'я, ви можете зробити це $("[name=myCheckBox").prop("checked", true);
для прапорців.
Ви можете грати з цим кодом тут: http://jsbin.com/OSULAtu/1/edit?html,output
Мені сподобалась відповідь @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"]);
}
$("*")
він би відповідав усьому, тому ви повинні використовувати тип в оренді, $("input")
або ідентифікатор бути ідеальним, оскільки у DOM є рідні дзвінки, щоб отримати елемент за id
document.querySelectorAll
.
$("input[name=gender]")
або $("input[name=gender]:radio")
(для сучасних браузерів)$("input[name=gender][type=radio]")
Якщо ви хочете, щоб це було по-справжньому динамічним і виберіть радіо, яке відповідає вхідним даним, це спрацює. Він використовує гендерне значення даних, переданих або використовується за замовчуванням.
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's 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;
буде.
ваш селектор може бути таким, як і інші хлопці, рекомендовані вище.
Це працює для декількох перемикачів
$('input:radio[name="Aspirant.Gender"][value='+jsonData.Gender+']').prop('checked', true);