Categories
html javascript jquery radio-button

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

330

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.

5

  • 5

    you don’t strictly need to specify the attribute ‘for’, as long as the fields are included between their corresponding ‘label’ tags

    – Lucius

    Sep 18, 2012 at 10:22

  • 2

    jQuery 1.8 and above changes this…. I added an answer below explaining.

    Oct 3, 2012 at 17:02

  • 3

    A1rPun’s answer is the best: a non-jQuery one-liner!

    – Rudey

    Sep 30, 2014 at 12:36

  • 1

    Used a radio button for maintaining state in my js app. Debugged for a good one hour before checking this thread. Check this out

    – Prasanth

    Jun 5, 2015 at 5:41

  • In plain JS: document.querySelectorAll("input:radio[name=theme]").forEach(function() { this.onclick=function() { var value = this.value; }; });

    – mplungjan

    Apr 18, 2018 at 9:55


344

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.

7

  • 4

    @gargantaun – if you click a radio button, what happens to it?

    Mar 2, 2012 at 0:23

  • 11

    Good point. Although it’s still not “How to get selected radiobutton value using its name in jQuery?”. It’s “How to get selected radiobutton value when clicking on it using jQuery?”. A small difference, but one that baffled me for a bit.

    Mar 2, 2012 at 10:13

  • 1

    According to the question this answer is correct. in global view we go for clayton’s answer.

    – Krish

    May 27, 2012 at 5:32

  • 8

    As of jQuery 1.8 use [type='radio'] instead of :radio that way jQuery can take advantage of the performance boost provided by the native DOM querySelectorAll() method.

    – Adam

    Oct 28, 2012 at 18:01


  • 2

    @PaoloBergantino answer is 100% correct because it returns the value after clicking the desired radio [email protected] Rabenda answer does not give this.

    – Azam Alvi

    Aug 4, 2013 at 10:25

187

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.

4

  • 3

    Base don how I READ the question, this was the answer I needed. :checked is what i was missing in my equation. Thanks.

    – HPWD

    Oct 25, 2012 at 15:00

  • 9

    As of jQuery 1.8 use [type='radio'] instead of :radio that way jQuery can take advantage of the performance boost provided by the native DOM querySelectorAll() method.

    – Adam

    Oct 28, 2012 at 18:02

  • I gave a space after colon and before “checked” by mistake. So please make sure there is no space.

    Sep 26, 2014 at 6:27

  • A useful answer for those not wanting to get the value from a click event handler. Otherwise, you must use :checked to find which button is checked, for example, with a form submit event handler where the this keyword does not map to the clicked button.

    Jan 3, 2015 at 22:30


156

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

2

  • I went on simply with $("input[name=theme]:checked").val(); (leaving the :radio part out and it seems to work fine in IE, FF, Safari and Chrome. I had to work with jQ v 1.3… Of course, that means there is only one element named ‘theme’

    Feb 14, 2014 at 19:57


  • 2

    This is the best answer IMO, it says “get me the value of the CHECKED radio with THIS name”. No need for events, etc.

    – ProVega

    Mar 20, 2015 at 16:52