JQuery - find a radio button by value

Question

How would I use JQuery to find a radio button by its value?

score 145 · Accepted Answer · answered Jan 31 '10 at 21:57

145

Try this:

$(":radio[value=foobar]")

This will select all radio buttons with the attribute value="foobar".

answered Jan 31 '10 at 21:57

Gumbo

643,351
109
780
844

Thanks I used it as such: jQuery.each(cookieObj, function(i, val) { $(":radio[value=val]").attr('checked',true); }); – van Jan 31 '10 at 22:04
3

@test: Try this instead: `function(i, val) { $(":radio[value="+val+"]").attr('checked',true); }` – Gumbo Jan 31 '10 at 22:14
1

@Gumbo if we give that function a name, can we call it like so?: $checkedRadioValues = findChecked("value"); – Ben Sewards Jul 22 '13 at 18:13

score 27 · Answer 2 · answered Sep 02 '11 at 20:58

27

I'm using jQuery 1.6 and this did not work for me: $(":radio[value=foobar]").attr('checked',true);

Instead, I'm using: $('[value="foobar"]').attr('checked',true); and it works great.

The actual code I'm using clears the radios first and uses prop instead of attr

$('[name=menuRadio]').prop('checked',false);

$('[name=menuRadio][value="Bar Menu"]').prop('checked',true);

answered Sep 02 '11 at 20:58

dogatonic

2,658
1
23
14

is this a bug that was fixed? or should we still put quotes around the value? – Simon_Weaver Dec 16 '12 at 09:57

Jai · Answer 3 · 2017-04-03T11:16:47.187

19

This can be achieved by this too:

$('input[type="radio"][value="aaa"]').val();

This will select the radio which has the value of aaa

With .filter() method:

var radio =  $('input[type="radio"]').filter(function(){
                       return this.value === 'aaa';
                      }).val();

edited Apr 03 '17 at 11:16

answered Dec 16 '12 at 10:17

Jai

74,255
12
74
103

1

this will actually select all radio buttons and **change their values** to `aaa` then return the `'aaa'` – bendman Oct 18 '13 at 18:45

score 5 · Answer 4 · answered Oct 26 '11 at 06:02

say you have something like this in the HTML:

<fieldset>
    <input type="radio" name="UI_opt" value="alerter" checked> Alerter<br/>
    <input type="radio" name="UI_opt" value="printer"> Printer<br/>
    <input type="radio" name="UI_opt" value="consoler"> Consoler<br/>
</fieldset>

then this sort of thing works.

$("fieldset input[name='UI_opt'][checked]").val()

Simon_Weaver · Answer 5 · 2012-12-17T21:45:18.503

A full selector would look like this:

bool shipToBilling = $("[name=ShipToBillingAddress][value=True]")

given that you probably have more than one radio button group like this

<input name="ShipToBillingAddress" type="radio" value="True" checked="checked">
<input name="ShipToBillingAddress" type="radio" value="False">

<input name="SomethingElse" type="radio" value="True" checked="checked">
<input name="SomethingElse" type="radio" value="False">

Using an ID selector like this (next example) is bad because you shouldn't have multiple elements with the same ID. I assume someone finding this question already knows this is bad.

$("#DidYouEnjoyTheMovie:radio[value=yes]")

The following about :radio may or may not be of interest

Because :radio is a jQuery extension and not part of the CSS specification, queries using :radio cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use [type="radio"] instead.

JQuery - find a radio button by value

5 Answers5

Linked