jQuery set radio button

Question

I am trying to set a radio button. I want set it by using the value or the id.

This is what I've tried.

$('input:radio[name=cols]'+" #"+newcol).attr('checked',true);

newcol is the id of the radio button.

Maybe a little edit is in order.

There are two sets of radio boxes one with cols and the other with rows. So I see the point in not using id's. My bad. So I have as an example:

<input type="radio" name="rows" class="listOfCols" 
   style="width: 50%; " value="Site"></input>

and

<input type="radio" name="cols" class="listOfCols" 
   style="width: 50%; "  value="Site"></input>

with the id's removed, and I need to set the correct one.

possible duplicate of [how to set radio option checked onload with jQuery](http://stackoverflow.com/questions/871063/how-to-set-radio-option-checked-onload-with-jquery) — Chris Pratt, Mar 01 '12 at 22:27

score 214 · Accepted Answer · answered Mar 01 '12 at 22:25

214

Your selector looks for the descendant of a input:radio[name=cols] element that has the id of newcol (well the value of that variable).

Try this instead (since you're selecting by ID anyway):

$('#' + newcol).prop('checked',true);

Here is a demo: http://jsfiddle.net/jasper/n8CdM/1/

Also, as of jQuery 1.6 the perferred method of altering a property is .prop(): http://api.jquery.com/prop

answered Mar 01 '12 at 22:25

Jasper

75,717
14
151
146

5

+1 for `prop` vs `attr`. `attr` deprecated for properties and no longer work in jQuery 2.0 )) – gavenkoa Dec 20 '13 at 16:09
@FedericoJ's answer with using an array should be the accepted one. – TheStoryCoder Mar 29 '23 at 14:45

score 107 · Answer 2 · edited Nov 09 '16 at 10:10

107

I found the answer here:
https://web.archive.org/web/20160421163524/http://vijayt.com/Post/Set-RadioButton-value-using-jQuery

Basically, if you want to check one radio button, you MUST pass the value as an array:

$('input:radio[name=cols]').val(['Site']);
$('input:radio[name=rows]').val(['Site']);

edited Nov 09 '16 at 10:10

Menuka Ishan

5,164
3
50
66

answered Aug 01 '13 at 12:33

Federico J.

15,388
6
32
51

Hello That Link has no Suggested content in it. Why are you guys keep rejecting my edit to remove the link. It does not contains anything regards the matter. – Menuka Ishan Nov 09 '16 at 03:25
@MenukaIshan, the point is: Give credit. The link is available in web.archive.org, and the guy who wrote it the first time and from who I get the idea of the answer has to receive its credit. Don't remove the link, and if you want to see the original post, copy and paste the link (I don't know why it's going to the old page instead of the web.archive.org) – Federico J. Nov 09 '16 at 08:45
2

@Chococroc You haven't configured the Markdown of question correctly. I saw the Web archive version and linked it correctly. After Review It'll correctly link to the site. – Menuka Ishan Nov 09 '16 at 09:29
3

It seems like this should be the accepted answer since it is the solution mentioned in the [jQuery docs](http://api.jquery.com/val/) – plong0 Jun 13 '17 at 20:57

score 17 · Answer 3 · answered Mar 01 '12 at 22:24

17

In your selector you seem to be attempting to fetch some nested element of your radio button with a given id. If you want to check a radio button, you should select this radio button in the selector and not something else:

$('input:radio[name="cols"]').attr('checked', 'checked');

This assumes that you have the following radio button in your markup:

<input type="radio" name="cols" value="1" />

If your radio button had an id:

<input type="radio" name="cols" value="1" id="myradio" />

you could directly use an id selector:

$('#myradio').attr('checked', 'checked');

answered Mar 01 '12 at 22:24

Darin Dimitrov

1,023,142
271
3,287
2,928

If there are multiple radios with the `cols` name then `$('input:radio[name="cols"]').attr('checked', 'checked');` will select just the last one. It will run the code on each, but every-time you set the `checked` property, the previously set element gets unset. Here's a demo: http://jsfiddle.net/jasper/n8CdM/2/ – Jasper Mar 01 '12 at 22:31
@Jasper, yes, that's true. It is why I suggested using an id selector. – Darin Dimitrov Mar 01 '12 at 22:32

score 15 · Answer 4 · edited Sep 16 '13 at 12:30

15

You can try the following code:

$("input[name=cols][value=" + value + "]").attr('checked', 'checked');

This will set the attribute checked for the radio columns and value as specified.

edited Sep 16 '13 at 12:30

NREZ

942
9
13

answered Sep 16 '13 at 12:05

punita.gosar

400
3
8

2

`...the most important concept to remember about the checked attribute is that it does not correspond to the checked property.` Source: http://api.jquery.com/attr/ – Jasper Jun 27 '14 at 15:51

score 10 · Answer 5 · answered Mar 01 '12 at 22:25

10

Why do you need 'input:radio[name=cols]'. Don't know your html, but assuming that ids are unique, you can simply do this.

$('#'+newcol).prop('checked', true);

answered Mar 01 '12 at 22:25

elclanrs

92,861
21
134
171

score 6 · Answer 6 · answered Mar 01 '12 at 22:27

6

Try this:

$("#" + newcol).attr("checked", "checked");

I've had issues with attr("checked", true), so I tend to use the above instead.

Also, if you have the ID then you don't need that other stuff for selection. An ID is unique.

answered Mar 01 '12 at 22:27

The Awnry Bear

4,599
3
29
33

1

prop is better than attr for things like this – RozzA Aug 04 '13 at 13:20
attr is gone in jQuery 1.9+ Use prop. – Mike_Laird Sep 18 '13 at 17:11
You're right, but ultimately it depends on your specific situation. If your code will be always running with jQuery 1.6+, then prop is the way to go. But if your code may be running on older versions then the solution isn't as straightforward. For example, I maintain the jQuery PickList plugin, and we support jQuery 1.4+, so simply using prop is not an option. This is an open ticket, so if you have any elegant suggestions I would love to hear them; I just haven't had time to do the research yet. – The Awnry Bear Sep 22 '13 at 15:23
The problem is that even if your solution might be more backward-compatible it simply doesnt work in this case: Select A, it will get new `checked="checked"` attribute and browser will show it as checked, then select B and the same will happen. Now when you select A again it will already have `checked="checked"` attribute and nothing will change. As a side effect of that B will still be selected, not A. – Kyborek Sep 03 '14 at 13:03

score 4 · Answer 7 · answered Aug 17 '17 at 00:17

4

Using .filter() also works, and is flexible for id, value, name:

$('input[name="cols"]').filter("[value='Site']").attr('checked', true);

(seen on this blog)

answered Aug 17 '17 at 00:17

dhc

647
8
17

1

I believe this is an equally valid answer, but it should use the prop() method: $('input[name="cols"]').filter("[value='Site']").prop('checked', true);. The user wants to set by "value or id". There may be times were you do not want to set id values for every radio option, so getting by name and filtering by value is useful. – Zac Imboden Feb 10 '18 at 16:52

score 3 · Answer 8 · answered Aug 09 '20 at 19:44

3

In my case, radio button value is fetched from database and then set into the form. Following code works for me.

$("input[name=name_of_radio_button_fields][value=" + saved_value_comes_from_database + "]").prop('checked', true);

answered Aug 09 '20 at 19:44

Atequer Rahman

1,171
10
25

score 2 · Answer 9 · answered Sep 13 '18 at 11:59

2

Combining previous answers:

$('input[name="cols"]').filter("[value='Site']").click();

answered Sep 13 '18 at 11:59

Graham Laight

4,700
3
29
28

score 2 · Answer 10 · answered Mar 01 '12 at 22:25

2

Since newcol is the ID of the radio button, You can simply use it as below.

$("#"+newcol).attr('checked',true);

answered Mar 01 '12 at 22:25

Selvakumar Arumugam

79,297
15
120
134

score 1 · Answer 11 · answered May 11 '21 at 04:41

1

in my case, i use (to active Css animation when click radio)

$('input:radio[name="cols"]').trigger ('click');

answered May 11 '21 at 04:41

Hoàng Vũ Tgtt

1,863
24
8

score 0 · Answer 12 · answered Apr 23 '15 at 09:27

0

You can simply use:

$("input[name='cols']").click();

answered Apr 23 '15 at 09:27

Markoj

233
2
7

score 0 · Answer 13 · answered Oct 20 '16 at 15:02

The chosen answer works in this case.

But the question was about finding the element based on radiogroup and dynamic id, and the answer can also leave the displayed radio button unaffected.

This line does selects exactly what was asked for while showing the change on screen as well.

$('input:radio[name=cols][id='+ newcol +']').click();

score 0 · Answer 14 · edited Apr 28 '21 at 10:11

0

$('#a_state option[value="'+a_state+'"]').prop("selected", true);

prop() is the best option because attr sometimes works randomly.

edited Apr 28 '21 at 10:11

Minal Chauhan

6,025
8
21
41

answered Apr 28 '21 at 09:53

Raj Rajput

21
2

jQuery set radio button

14 Answers14

Linked