Як у jQuery я можу вибрати елемент за атрибутом імені?

У мене на веб-сторінці є 3 перемикачі, як нижче:

<label for="theme-grey">
  <input type="radio" id="theme-grey" name="theme" value="grey" />Grey</label>
<label for="theme-pink">
  <input type="radio" id="theme-pink" name="theme" value="pink" />Pink</label>
<label for="theme-green">
  <input type="radio" id="theme-green" name="theme" value="green" />Green</label>

У jQuery я хочу отримати значення вибраної перемикача при натисканні будь-якого з цих трьох. У jQuery у нас є селектори id (#) та class (.), Але що робити, якщо я хочу знайти перемикач за його назвою, як нижче?

$("<radiobutton name attribute>").click(function(){});

Скажіть, будь ласка, як вирішити цю проблему.

Це слід зробити, все це є в документації , яка має дуже подібний приклад до цього:

$("input[type='radio'][name='theme']").click(function() {
    var value = $(this).val();
});

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

Щоб визначити, який перемикач встановлений, спробуйте:

$('input:radio[name=theme]').click(function() {
  var val = $('input:radio[name=theme]:checked').val();
});

Подія буде зафіксована для всіх радіо кнопок у групі, а значення вибраної кнопки буде розміщено у val.

Оновлення: Після публікації я вирішив, що відповідь Паоло вище є кращою, оскільки він використовує один обхід менш ніж DOM. Я даю цю відповідь стояти, оскільки вона показує, як отримати вибраний елемент таким чином, що сумісний між веб-браузером.

$('input:radio[name=theme]:checked').val();

Інший спосіб

$('input:radio[name=theme]').filter(":checked").val()

Це чудово працює для мене. Наприклад, у вас є дві радіо кнопки з тим самим "ім'ям", і ви просто хотіли отримати значення перевіреної. Ви можете спробувати цей.

$valueOfTheCheckedRadio = $('[name=radioName]:checked').val();

Наступний код використовується для отримання вибраного значення перемикача за назвою

jQuery("input:radio[name=theme]:checked").val();

Спасибі Аднан

Я знайшов це питання, коли досліджував помилку після того, як я оновив з 1.7.2 jQuery до 1.8.2. Я додаю свою відповідь, оскільки відбулася зміна jQuery 1.8 і вище, що змінює спосіб відповіді на це запитання.

За допомогою jQuery 1.8 вони зняли псевдоселектори, такі як: радіо,: прапорець,: текст.

Для того, щоб зробити вище тепер просто замінити :radioз [type=radio].

Тож ваша відповідь тепер стає для всіх версій jQuery 1.8 і вище:

$("input[type=radio][name=theme]").click(function() { 
    var value = $(this).val(); 
}); 

Про зміну ви можете прочитати на 1.8 readme та конкретному квитку для цієї зміни , а також зрозуміти, чому на сторінці : вибір радіо в розділі «Додаткова інформація».

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

document.querySelector('[name="theme"]:checked').value;

jsfiddle

Огляд ефективності поточних відповідей дивіться тут

Якщо ви хочете дізнатись значення вибраної за замовчуванням радіо-кнопки перед подією натискання, спробуйте:

сигнал ($ ("вхід: радіо: перевірено"). val ());

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

$('input[type=radio]').change(function(){
    var value = $(this).filter(':checked' ).val();
    alert(value);
});

Ось скрипковий URL

http://jsfiddle.net/h6ye7/67/

<input type="radio" name="ans3" value="help"> 
<input type="radio" name="ans3" value="help1">
<input type="radio" name="ans3" value="help2">

<input type="radio" name="ans2" value="test"> 
<input type="radio" name="ans2" value="test1">
<input type="radio" name="ans2" value="test2">

<script type="text/javascript">
  var ans3 = jq("input[name='ans3']:checked").val()
  var ans2 = jq("input[name='ans2']:checked").val()
</script>

Якщо ви хочете отримати справжнє / хибне значення, використовуйте це:

  $("input:radio[name=theme]").is(":checked")

Щось подібне, можливо?

$("input:radio[name=theme]").click(function() { 
 ...
}); 

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

У вас на одній сторінці є кілька груп радіо кнопок, ви також можете спробувати це, щоб отримати значення перемикача:

$("input:radio[type=radio]").click(function() {
    var value = $(this).val();
    alert(value);
});

Ура!

також можна використовувати клас CSS для визначення діапазону радіо кнопок, а потім використовувати наступне для визначення значення

$('.radio_check:checked').val()

Це працювало для мене ..

HTML:

<input type="radio" class="radioClass" name="radioName" value="1" />Test<br/>
<input type="radio" class="radioClass" name="radioName" value="2" />Practice<br/>
<input type="radio" class="radioClass" name="radioName" value="3" />Both<br/>

Jquery:

    $ (". radioClass"). кожен (функція () {
        if ($ (this) .is (': перевірено'))
        попередження ($ (це) .val ());
    });

Сподіваюся, це допомагає ..

$('input:radio[name=theme]').bind(
  'click',
  function(){
    $(this).val();
});

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

Ви створюєте RadioButtonконтроль, ASP.NETяк показано нижче:

<asp:RadioButton runat="server" ID="rbSingle" GroupName="Type" CssClass="radios" Text="Single" />
<asp:RadioButton runat="server" ID="rbDouble" GroupName="Type" CssClass="radios" Text="Double" />
<asp:RadioButton runat="server" ID="rbTriple" GroupName="Type" CssClass="radios" Text="Triple" />

І ASP.NETробить наступний HTML для вашогоRadioButton

<span class="radios"><input id="Content_rbSingle" type="radio" name="ctl00$Content$Type" value="rbSingle" /><label for="Content_rbSingle">Single</label></span>
<span class="radios"><input id="Content_rbDouble" type="radio" name="ctl00$Content$Type" value="rbDouble" /><label for="Content_rbDouble">Double</label></span>
<span class="radios"><input id="Content_rbTriple" type="radio" name="ctl00$Content$Type" value="rbTriple" /><label for="Content_rbTriple">Triple</label></span>

Тому що ASP.NETми не хочемо використовувати RadioButtonім'я керування чи ідентифікатор, оскільки вони можуть з будь-якої причини змінитися з-за потреби користувача (зміна імені контейнера, імені форми, імені користувача, ...), як ви бачите в коді вище.

Єдиний можливий спосіб отримати значення RadioButtonвикористовуючого jQuery - це використання класу css, як згадується у цій відповіді на абсолютно не пов'язане з цим питання.

$('span.radios input:radio').click(function() {
    var value = $(this).val();
});