В 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>

Ответ 1

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

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

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

Ответ 2

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

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

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

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

Ответ 3

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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

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

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

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

Ответ 7

Я нашел этот вопрос, поскольку я изучал ошибку после того, как я обновил версию 1.7.2 jQuery до 1.8.2. Я добавляю свой ответ, потому что произошли изменения в jQuery 1.8 и выше, которые меняют способ ответа на этот вопрос.

С jQuery 1.8 они устарели псевдоселекторами, такими как: radio,: checkbox,: text.

Чтобы сделать это, просто замените :radio на [type=radio].

Итак, теперь ваш ответ будет для всех версий jQuery 1.8 и выше:

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

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

Ответ 8

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

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

jsfiddle

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

Ответ 9

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

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

Ответ 10

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

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

Вот скрипт url

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

Ответ 11

<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>

Ответ 12

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

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

Ответ 13

Что-то вроде этого может быть?

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

Когда вы нажимаете на любой переключатель, я считаю, что он будет выбран, поэтому он будет вызываться для выбранного переключателя.

Ответ 14

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

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

Ура!

Ответ 15

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

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

Ответ 16

Это сработало для меня..

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() {
        if($(this).is(':checked'))
        alert($(this).val());
    });

Надеюсь, что это поможет.

Ответ 17

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

Ответ 18

Вы можете заметить, что использование селектора классов для получения значения элементов управления 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, как указано в this, ответить на совершенно не связанный с ним вопрос, как показано ниже

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