В 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

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

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

Answer 2

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

Answer 3

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

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

Ура! * * 1004

Answer 4

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

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

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

Answer 5

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

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

Answer 6

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

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

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

Answer 7

Вы можете заметить, что с помощью селектора классов для получения значения 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();
});

Answer 8

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