In jQuery, how do I select an element by its name attribute?

user_45261 0
Viewed 562812

I have 3 radio buttons in my web page, like below:

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

In jQuery, I want to get the value of the selected radio button when any of these three are clicked. In jQuery we have id (#) and class (.) selectors, but what if I want to find a radio button by its name, as below?

$("<radiobutton name attribute>").click(function(){});

Please tell me how to solve this problem.

radio-button html jquery javascript
18 Answers

This should do it, all of this is in the documentation, which has a very similar example to this:

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

I should also note you have multiple identical IDs in that snippet. This is invalid HTML. Use classes to group set of elements, not IDs, as they should be unique.

Paolo_Bergantino_164170

To determine which radio button is checked, try this:

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

The event will be caught for all of the radio buttons in the group and the value of the selected button will be placed in val.

Update: After posting I decided that Paolo's answer above is better, since it uses one less DOM traversal. I am letting this answer stand since it shows how to get the selected element in a way that is cross-browser compatible.

user_1220590

another way

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

Something like this maybe?

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

When you click on any radio button, I believe it will end up selected, so this is going to be called for the selected radio button.

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