Як встановити перевірену опцію радіо для завантаження за допомогою jQuery


297

Як встановити перевірену опцію радіопередачі за допомогою jQuery?

Потрібно перевірити, чи не встановлено значення за замовчуванням, а потім встановити за замовчуванням


1
@ryenus чи не інше питання було б моїм дублікатом, оскільки я задав моє ще до іншого питання?
Філ Паффорд

Відповіді:


558

Скажімо, у вас такі радіо кнопки, наприклад:

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

Цікаво, що Paolo, IIRC, специфікація говорить, що перевірений атрибут призначений для перевірки = "перевірено" (хоча я можу помилятися). Чи в цьому прикладі jQuery перекладає значення true у "перевіреному"? Просто цікаво ...
alex

8
Мій оригінальний приклад "перевірив", "перевірив", це одна з тих речей, які я ніколи не пам'ятаю, який з них правильний. jQuery визначає це так чи інакше, але я знаю, якщо ви хочете встановити фактичний перевірений атрибут елемента DOM, він повинен бути булевим, наприклад, document.getElementById ('x'). - тому я пішов з тим.
Паоло Бергантіно

просто хочу додати цю позначку квадратної дужки [ім’я = стать] не працює на веб-переглядачі Windows Phone 7.
最 白 目

Я просто спробував це з FF та jQuery 1.9.1 та .attr ("перевірено", правда); не працює, проте .prop ("перевірено", правда); робить. дивіться на stackoverflow.com/questions/4618733/… (дублікат?)
IARI

Швидкий: НЕ використовуйте $radios.removeAttr('checked')перед опорою. Це сплутає браузер і розміщені значення.
igasparetto

109

Як щодо одного лайнера?

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

Наведене вище краще, оскільки підтримує більш складні значення імен.
Дж. Мартін

13
Це не відповідає повністю на питання ops - для цього потрібно перевірити, чи параметр за замовчуванням вже перевіряється спочатку. Крім того, вам зараз слід використовувати prop () замість attr () для подібних речей. Для пояснення див. Розділ «Атрибути проти властивостей» тут: api.jquery.com/prop . Крім того, немає необхідності в додатковому фільтрі, ви можете просто комбінувати два селектори, наприклад $ ("input [name = gender] [value = Male]"). Prop ("перевірено", правда);
jackocnr

3
Це рішення працює вперше, коли я встановив радіо, але після цього виходить з ладу. Використовуючи "prop" замість "attr", він працює чудово. Отже: $ ('input: radio [name = "gender"]'). Filter ('[value = "Male"]'). Prop ('перевірено', правда);
Андрій

2
Правильний - prop () тепер є рекомендованим методом доступу до властивостей.
Ендрю Маккомб

1
Простіше: $ ('input: radio [name = "gender"] [value = "Male"]'). Attr ('перевірено', правда);
Регіс

52

Це спричинить помилку form.reset ():

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

Але цей працює:

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

5
Я б рекомендував вам використовувати тригер ("клацання") трохи більш читабельним і зупиняє виклик методу.
Barkermn01

35

У 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


22

Мені сподобалась відповідь @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);

15

Я думаю, ви можете припустити, що це ім'я унікальне, і все радіо в групі має те саме ім'я. Тоді ви можете використовувати підтримку jQuery так:

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

Примітка: Проходження масиву важливо.

Умовна версія:

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

1
Це погано, тому що ви скануєте кожен елемент на значення, я не рекомендую це використовувати колись
Barkermn01

@MartinBarker, чи можете ви пояснити, що ви, чоловіки, скануючи?
Сарам

Шукаючи DOM, якщо ви не використовуєте нічого, окрім атрибута, що змушує jQuery переходити, хоча кожен елемент у DOM і перевіряє, чи відповідає цей збіг, як якщо б ви використовували, $("*")він би відповідав усьому, тому ви повинні використовувати тип в оренді, $("input")або ідентифікатор бути ідеальним, оскільки у DOM є рідні дзвінки, щоб отримати елемент за id
Barkermn01,

@MartinBarker - я згоден. Зазвичай я вибираю префікс із ідентифікатором форми або надаю контекстний парам. В даний час сканування DOM - це не зусилля jQuery, а внутрішній двигун браузера document.querySelectorAll.
Сарам

Для вирішення вищезазначених проблем використовуйте $("input[name=gender]")або $("input[name=gender]:radio")(для сучасних браузерів)$("input[name=gender][type=radio]")
David Balažic

7

Якщо ви хочете, щоб це було по-справжньому динамічним і виберіть радіо, яке відповідає вхідним даним, це спрацює. Він використовує гендерне значення даних, переданих або використовується за замовчуванням.

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


3

І якщо ви хочете передати значення з вашої моделі і хочете вибрати перемикач з групи на основі завантаження на основі значення, ніж використовуйте:

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>

2

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


3
так, але мені потрібно, щоб воно було динамічним, оскільки переглядаючий сайт передаватиметься за замовчуванням при завантаженні сторінки.
Минув

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

6
Будь ласка, не публікуйте відповідей, що стосуються лише коду. Будь ласка, дайте пояснення також.
Лі Тейлор

2

Ось приклад з вищезазначеними методами:

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

1

Зверніть увагу на цю поведінку при отриманні радіо вхідних значень:

$('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()чином, не повертає перевірене значення радіовходу, як ви могли очікувати - воно повертає значення першої радіо кнопки.


1

Де-форма Jquery перевіряється соло-ель-елементом

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

2
Вам потрібно описати свою відповідь і відформатувати свій код
Майкл

0

// Якщо ви робите це на JavaScript або на такій основі, як основна система, ви зіткнетеся з цим багато, у вас може виникнути щось подібне

$MobileRadio = $( '#mobileUrlRadio' );

поки

$MobileRadio.checked = true;

не буде працювати,

$MobileRadio[0].checked = true;

буде.

ваш селектор може бути таким, як і інші хлопці, рекомендовані вище.


Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.