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

341

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

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

  • 5
    вам не нужно строго указывать атрибут «for», если поля включены между соответствующими тегами «label»
  • 2
    jQuery 1.8 и выше меняет это .... Я добавил ответ ниже, объясняя.
Показать ещё 3 комментария
Теги:
radio-button

18 ответов

346
Лучший ответ

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

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

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

  • 4
    @gargantaun - если вы нажмете переключатель, что с ним будет?
  • 11
    Хорошая точка зрения. Хотя это все еще не «Как получить выбранное значение радиокнопки, используя его имя в jQuery?». Это «Как получить выбранное значение радиокнопки при нажатии на него с помощью jQuery?». Небольшая разница, но немного сбившая меня с толку.
Показать ещё 5 комментариев
175

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

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

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

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

  • 3
    Основа понимаешь, как я ЧИТАЮ вопрос, это был ответ, который мне был нужен. : проверил, что я пропустил в моем уравнении. Благодарю.
  • 9
    Начиная с jQuery 1.8 используйте [type='radio'] вместо :radio таким образом, jQuery может воспользоваться преимуществами повышения производительности, обеспечиваемыми собственным методом DOM querySelectorAll() .
Показать ещё 2 комментария
148
$('input:radio[name=theme]:checked').val();
  • 0
    Я просто продолжил с $("input[name=theme]:checked").val(); (опуская :radio часть, и она, кажется, прекрасно работает в IE, FF, Safari и Chrome. Мне пришлось работать с jQ v 1.3 ... Конечно, это означает, что есть только один элемент с именем 'theme'
  • 2
    Это лучший ответ IMO, он говорит: «Принесите мне значение ПРОВЕРЕНО радио с этим именем». Нет необходимости в событиях и т. Д.
38

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

$('input:radio[name=theme]').filter(":checked").val()
  • 1
    Это полезно, если вы заинтересованы в получении значения +1
  • 0
    Это $themeRadios = $('input:radio[name=theme']) потому что вы можете использовать переменную для хранения переключателей, например, $themeRadios = $('input:radio[name=theme']) чтобы установить любые обработчики событий, а затем получить значение с помощью фильтра, например, $themeRadios.filter(":checked").val() .
Показать ещё 1 комментарий
19

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

$valueOfTheCheckedRadio = $('[name=radioName]:checked').val();
  • 2
    Спасибо друг. простой и легкий в использовании
  • 0
    Причина, по которой этот ответ лучше, чем принятый в настоящее время ответ с более чем 250 голосами, состоит в том, что этот ответ также учитывается, когда пользователь взаимодействует с переключателем с помощью клавиатуры.
14

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

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

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

  • 0
    хм .. разве я не исправил форматирование кода в вашем последнем ответе? Пожалуйста, позаботьтесь об этом сами :-)
13

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

  • 5
    : флажок не устарел. Таким образом, вы можете использовать $("input[type='radio'][name='theme']:checked")
11

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

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

jsfiddle

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

  • 1
    Спасибо за этот ответ. Потому что я не смог получить принятый ответ для работы в любой форме.
9

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

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

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

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

Вот скрипт url

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

4

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

  $("input:radio[name=theme]").is(":checked")
4
<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>
3

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

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

Ура!

3

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

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

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

  • 1
    @ Недействителен с jQuery 1.3 (до этого даже не рекомендуется). blog.jquery.com/2009/01/05/help-test-jquery-13-beta-2 "Старые, XPath, селекторы атрибутов стиля: [@ attr = value]. Они уже давно устарели - и мы наконец их удаляем. Чтобы исправить это просто удалите @! "
  • 0
    Спасибо за указание ... редактирование моего поста.
2

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

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

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

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

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

0

Вы можете заметить, что использование селектора классов для получения значения элементов управления 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();
});
0
$('input:radio[name=theme]').bind(
  'click',
  function(){
    $(this).val();
});

Ещё вопросы

Сообщество Overcoder
Наверх
Меню