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

Question

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.

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 '12 at 10:22
jQuery 1.8 and above changes this.... I added an answer below explaining. — Kevin LaBranche, Oct 03 '12 at 17:02
[A1rPun's answer](http://stackoverflow.com/a/26121005/1185136) is the best: a non-jQuery one-liner! — Rudey, Sep 30 '14 at 12:36
Used a radio button for maintaining state in my js app. Debugged for a good one hour before checking this thread. [Check this out](http://jsfiddle.net/b77t8Lyt/) — Prasanth, Jun 05 '15 at 05:41
In plain JS: `document.querySelectorAll("input:radio[name=theme]").forEach(function() { this.onclick=function() { var value = this.value; }; });` — mplungjan, Apr 18 '18 at 09:55

score 345 · Accepted Answer · edited Jan 31 '19 at 19:47

345

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.

edited Jan 31 '19 at 19:47

mbomb007

3,788
3
39
68

answered Jun 12 '09 at 11:15

Paolo Bergantino

480,997
81
517
436

4

@gargantaun - if you click a radio button, what happens to it? – Paolo Bergantino Mar 02 '12 at 00: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. – gargantuan Mar 02 '12 at 10:13
1

According to the question this answer is correct. in global view we go for clayton's answer. – Krish May 27 '12 at 05:32
1

This was not the answer I was looking for because it still took the value of the first radio button in the list. The answer below is the correct answer. – Adam Levitt Jul 15 '12 at 20:43
@AdamLevitt: You don't understand the question and/or the answer if you think this answer is wrong. – Paolo Bergantino Jul 16 '12 at 01:34
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 '12 at 18:01
2

@PaoloBergantino answer is 100% correct because it returns the value after clicking the desired radio button.@Clayton Rabenda answer does not give this. – Azam Alvi Aug 04 '13 at 10:25

jeff.mitchel · Answer 2 · 2009-06-12T15:23:06.287

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.

edited Jun 12 '09 at 15:23

answered Jun 12 '09 at 15:06

jeff.mitchel

1,887
1
10
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 '12 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 '12 at 18:02
I gave a space after colon and before "checked" by mistake. So please make sure there is no space. – Smoking monkey Sep 26 '14 at 06: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. – Cedric Ipkiss Jan 03 '15 at 22:30

score 156 · Answer 3 · answered Jun 04 '13 at 05:42

156

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

answered Jun 04 '13 at 05:42

Jay

3,353
5
25
34

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' – morespace54 Feb 14 '14 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 '15 at 16:52

score 39 · Answer 4 · answered Nov 30 '13 at 05:34

39

another way

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

answered Nov 30 '13 at 05:34

h0mayun

3,466
31
40

1

This one is useful if you are interested in grabbing the value +1 – swapnesh Jan 27 '14 at 12:22
This is solid because you can use a variable to keep the radio buttons, e.g. `$themeRadios = $('input:radio[name=theme'])` to set any event handlers and then get the value by using the filter, e.g. `$themeRadios.filter(":checked").val()`. – Joshua Pinter Jan 29 '15 at 16:35

score 20 · Answer 5 · answered Sep 07 '12 at 17:38

20

This works great for me. For example you have two radio buttons with the same "name", and you just wanted to get the value of the checked one. You may try this one.

$valueOfTheCheckedRadio = $('[name=radioName]:checked').val();

answered Sep 07 '12 at 17:38

wdonayredroid

431
4
3

The reason this answer is better than the currently-accepted 230+ upvoted answer is because this answer also accounts for when the user interacts with a radio button by keyboard. – user110857 Apr 14 '15 at 18:47

score 16 · Answer 6 · edited Mar 06 '13 at 11:04

16

The following code is used to get the selected radio button value by name

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

Thanks Adnan

edited Mar 06 '13 at 11:04

LeonardChallis

7,759
6
45
76

answered Mar 06 '13 at 10:45

Muhammad Adnan

231
3
4

hmm .. didn't I fix your code formatting in your last reply? Please take care of it yourself :-) – kleopatra Mar 06 '13 at 10:56

A1rPun · Answer 7 · 2017-01-16T12:56:42.833

14

For anyone who doesn't want to include a library to do something really simple:

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

jsfiddle

For a performance overview of the current answers check here

edited Jan 16 '17 at 12:56

answered Sep 30 '14 at 12:34

A1rPun

16,287
7
57
90

1

Thanks for this answer. Because I was unable to get the accepted answer to work in any form. – Chris Holmes Apr 26 '17 at 14:51

score 13 · Answer 8 · answered Oct 03 '12 at 17:02

I found this question as I was researching an error after I upgraded from 1.7.2 of jQuery to 1.8.2. I'm adding my answer because there has been a change in jQuery 1.8 and higher that changes how this question is answered now.

With jQuery 1.8 they have deprecated the pseudo-selectors like :radio, :checkbox, :text.

To do the above now just replace the :radio with [type=radio].

So your answer now becomes for all versions of jQuery 1.8 and above:

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

You can read about the change on the 1.8 readme and the ticket specific for this change as well as a understand why on the :radio selector page under the Additional Information section.

:checked is not deprecated. So you can use `$("input[type='radio'][name='theme']:checked")` — Adam, Oct 28 '12 at 17:59

score 9 · Answer 9 · answered Jun 24 '11 at 18:38

9

If you'd like to know the value of the default selected radio button before a click event, try this:

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

answered Jun 24 '11 at 18:38

lhoess

307
3
6

score 6 · Answer 10 · answered Mar 10 '15 at 23:17

6

You can use filter function if you have more than one radio group on the page, as below

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

Here is fiddle url

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

answered Mar 10 '15 at 23:17

Muhammad Salman

81
1
6

score 4 · Answer 11 · answered Jul 04 '12 at 06:33

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

score 4 · Answer 12 · answered Aug 05 '13 at 16:17

4

If you want a true/false value, use this:

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

answered Aug 05 '13 at 16:17

gls123

5,467
2
28
28

score 3 · Answer 13 · edited May 19 '17 at 15:15

3

I you have more than one group of radio buttons on the same page you can also try this to get the value of radio button:

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

Cheers!

edited May 19 '17 at 15:15

Jonnny

4,939
11
63
93

answered Jan 14 '15 at 18:01

ahmed

498
6
13

tschaible · Answer 14 · 2009-06-12T22:17:25.620

3

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.

edited Jun 12 '09 at 22:17

answered Jun 12 '09 at 11:13

tschaible

7,635
1
31
34

1

The @ is invalid as of jQuery 1.3 (deprecated prior to that, even). http://blog.jquery.com/2009/01/05/help-test-jquery-13-beta-2/ "Old, XPath, style attribute selectors: [@attr=value]. These have been deprecated for quite some time - and we’re finally removing them. To fix it just remove the @!" – racerror Jun 12 '09 at 22:09

score 2 · Answer 15 · answered Jun 14 '12 at 16:37

2

can also use a CSS class to define the range of radio buttons and then use the following to determine the value

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

answered Jun 14 '12 at 16:37

Daniel Fernandes

1,281
2
10
6

score 1 · Answer 16 · answered Feb 26 '13 at 08:11

This worked for me..

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

Hope it helps..

score 0 · Answer 17 · edited May 23 '17 at 12:34

You might notice using class selector to get value of ASP.NET RadioButton controls is always empty and here is the reason.

You create RadioButton control in ASP.NET as below:

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

And ASP.NET renders following HTML for your 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>

For ASP.NET we don't want to use RadioButton control name or id because they can change for any reason out of user's hand (change in container name, form name, usercontrol name, ...) as you can see in code above.

The only remaining feasible way to get the value of the RadioButton using jQuery is using css class as mentioned in this answer to a totally unrelated question as following

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

score 0 · Answer 18 · edited Jun 20 '11 at 09:17

0

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

edited Jun 20 '11 at 09:17

bluish

26,356
27
122
180

answered Jun 12 '09 at 18:58

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

18 Answers18

jsfiddle

Linked

Related