В jQuery, как выбрать элемент по его атрибуту name?

У меня есть 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(); 
}); 

Вы можете прочитать об изменении в файле readme 1.8 и о билете, специфичном для этого изменения, а также понять, почему на странице выбора радио: в разделе «Дополнительная информация».

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

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

jsfiddle

Для обзора производительности текущих ответов проверьте здесь

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

оповещения ($ ( "вход: радио: проверено".) Вал ());

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

$('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>

Если вы хотите значение true / false, используйте это:

  $("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"). each (function () {
        если ($ (это) .а ( ': проверено'))
        оповещения ($ (это) .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();
});