В 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(){});

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

18 ответов


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

$("input: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.

Update: после публикации я решил, что ответ Паоло выше лучше, так как он использует один меньше обхода 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();

спасибо Аднан!--2-->


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


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

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

jsfiddle

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


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

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

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

$('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() { 
 ...
}); 

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


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

$("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() {
        if($(this).is(':checked'))
        alert($(this).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 имя элемента управления или id, потому что они могут меняться по любой причине из рук пользователя (изменение имени контейнера, имени формы, имени usercontrol, ...) как вы можете см. код выше.

единственный оставшийся возможный способ получить значение RadioButton использование jQuery использует класс css, как указано в этой ответ на совершенно несвязанный вопрос следующим образом

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