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

Question

На моей веб-странице 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(){});

Скажите, пожалуйста, как решить эту проблему.

Answer 1

Это должно сделать это, все это находится в документации , которая имеет очень похожий пример:

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

Я также должен отметить, что в этом фрагменте у вас есть несколько идентичных идентификаторов. Это неверный HTML. Используйте классы для группировки набора элементов, а не идентификаторов, поскольку они должны быть уникальными.

Answer 2

Чтобы определить, какая радио-кнопка отмечена, попробуйте это:

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

Событие будет перехвачено для всех переключателей в группе, а значение выбранной кнопки будет помещено в значение val.

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

Answer 3

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

Answer 4

другой способ

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

Answer 5

Это прекрасно работает для меня. Например, у вас есть две радиокнопки с одинаковым «именем», и вы просто хотите получить значение проверенной. Вы можете попробовать это.

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

Answer 6

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

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

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

Answer 7

Я нашел этот вопрос, когда я исследовал ошибку после того, как я обновил с 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 и , относящемся к этому изменению , а также понять, почему на странице выбора радиоблока : в разделе «Дополнительная информация».

Answer 8

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

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

jsfiddle

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

Answer 9

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

alert($("input:radio:checked").val());

Answer 10

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

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

Вот URL скрипки

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