Radio Buttons "Checked" Attribute Not Working

Question

The radio button does not show up as checked by default. I started off without a default choice doing some very simple js validation and it wasn't working. So I opted to just use default values until I figured that out and discovered that something weird is going on.

The markup is valid and I've tried in FF, Safari and Chrome. Nothing works.

I think it's a conflict with the jQuery library because the problem goes away when I remove the call script.

<label>Do you want to accept American Express?</label> Yes
<input id="amex" style="width: 20px;" type='radio' name='Contact0_AmericanExpress' value='1' /> No
<input style="width: 20px;" type='radio' name='Contact0_AmericanExpress' class='check' value='0' checked="checked" />

What exactly is your problem here? I copied your HTML into an empty file, and the "No" button is checked. This is IE8, FF and Opera. — Christian Nesmark, Aug 31 '10 at 07:06

score 107 · Answer 1 · edited Dec 01 '18 at 00:08

107

If you have multiple of the same name with the checked attribute it will take the last checked radio on the page.

<form>
    <label>Do you want to accept American Express?</label>
    Yes<input id="amex" style="width: 20px;" type="radio" name="Contact0_AmericanExpress"  />  
    maybe<input id="amex" style="width: 20px;" type="radio" name="Contact0_AmericanExpress"  checked="checked" />  
    No<input style="width: 20px;" type="radio" name="Contact0_AmericanExpress" class="check" checked="checked" />
</form>

edited Dec 01 '18 at 00:08

Shea Hunter Belsky

2,815
3
22
31

answered Apr 05 '11 at 18:34

jeeves

1,071
1
7
3

6

It'll actually check the last radio within the `
`. You can have several checked inputs with the same name, as long as they belong to different forms.
– Bruno Lange May 20 '14 at 16:52
This was the issue in my case. The page had two divs, only one of which was displayed at a time. Both had a radio button group with the same name. In my instance, both had the checked attribute, but the browser seemed to be choosing the one from the hidden div (the latter one in the HTML) as the one to use for showing the selected radio button. – Phil DD Dec 07 '16 at 18:50
1

@BrunoLange This was my problem. I was rendering multiple instances of the same HTML on the page - which consisted of two radio buttons not enclosed within a form tag, with one radio button having the `checked` property. I had to wrap them in a `
` tag for each instance to have the default radio button checked.
– Matt May 22 '17 at 15:48
I needed to have the radio buttons and their uniquely named groups wrapped in their own form tags. – kbo4sho88 Jun 09 '17 at 18:19
1

this solved my problem, elements had same name while they are iterated and created dynamically!!! – Shantaram Tupe Mar 03 '18 at 11:30

score 51 · Answer 2 · answered Jan 30 '17 at 19:21

51

Radio inputs must be inside of a form for 'checked' to work.

answered Jan 30 '17 at 19:21

Michael Seltenreich

3,013
2
29
55

11

Putting the input of type `radio` inside a `form` (it was `div` before) solves my problem! I'm curious what's the reason for this? – Liutong Chen May 15 '19 at 22:03
Same here. I really don't know why a form tag is needed to get the check work reliably... o.o – jlang Jun 12 '19 at 14:47
I don't think this is necessary but using a form element will allow the naming to be 'scoped' I guess so the checked attribute will work. – Harry Theo Jul 30 '19 at 20:03
@CharisTheo, It is, in fact, necessary. Try for yourself. – Michael Seltenreich Jul 31 '19 at 05:45
1

@MichaelSeltenreich I did indeed and I have fixed this problem with changing the name of the radio buttons without including them in a form element – Harry Theo Jul 31 '19 at 13:56
Your solution will fail on some major browsers – Michael Seltenreich Aug 01 '19 at 15:56
I think this is sometimes related to a scoping issue. In my case, the issue was because I had multiple radios with the same name and value within the same document. Adding the `
` tags around each set seems to fix the issue, but changing the names of the various sets also works.
– stjns Jul 08 '20 at 21:41
Bizzare I had other sets where "checked" worked in the same page, but indeed for THIS set to work the whole page had to be in a form. Shrug. – edencorbin Mar 01 '21 at 13:23
Accidentally found that answer and using `form` solved my issue! – la_petite_kozel Aug 27 '21 at 12:14

score 39 · Answer 3 · edited May 23 '17 at 11:54

39

This might be it:

Is there a bug with radio buttons in jQuery 1.9.1?

In short: Don't use attr() but prop() for checking radio buttons. God I hate JS...

edited May 23 '17 at 11:54

Community

1
1

answered Sep 10 '13 at 10:02

Martin T.

3,132
1
30
31

8

This may not have answered the OP's question, but it answered mine – Tommy Nicholas Mar 25 '14 at 23:16
just found out the same issue yesterday. – CharlesC Mar 08 '16 at 14:14

score 11 · Answer 4 · answered May 24 '12 at 13:06

11

The ultimate JavaScript workaround to this annoying issue -

Simply wrap the jQuery command in a setTimeout. The interval can be extremely small, I use 10 milliseconds and it seems to be working great. The delay is so small that it is virtually undetectable to the end users.

setTimeout(function(){
  $("#radio-element").attr('checked','checked');
},10);

This will also work with

$("#radio-element").trigger('click');
$("#radio-element").attr('checked',true);
$("#radio-element").attr('checked',ANYTHING_THAT_IS_NOT_FALSE);

Hacky...hacky...hacky...hacky... Yes I know... hence this is a workaround....

answered May 24 '12 at 13:06

Lix

47,311
12
103
131

It seems that you are setting the attribute 'Checked' on all #radio-elements in your first example. – etoxin Jan 09 '13 at 03:58
As it is an id selector, there should be only 1 matching element – demonkoryu Aug 11 '20 at 11:19

score 5 · Answer 5 · answered Oct 19 '11 at 06:10

Hey I was also facing similar problem, in an ajax generated page.. I took generated source using Webdeveloper pluggin in FF, and checked all the inputs in the form and found out that there was another checkbox inside a hidden div(display:none) with same ID, Once I changed the id of second checkbox, it started working.. You can also try that.. and let me know the result.. cheers

score 3 · Answer 6 · answered Aug 31 '10 at 07:02

3

Just copied your code into: http://jsfiddle.net/fY4F9/

No is checked by default. Do you have any javascript running that would effect the radio box?

answered Aug 31 '10 at 07:02

Ben Rowe

28,406
6
55
75

I know, it's crazy right? No I don't have any scripts going that address radio buttons. Just some validation on text fields and a slider script. I'm going thru it right now just to make sure though.. – Jordan Aug 31 '10 at 07:19
Found the culprit but I don't know exactly what in that script is causing the problem – Jordan Aug 31 '10 at 07:29
Thanks Ben but it's definitely the script. When disabled I can see the buttons checked by default. – Jordan Aug 31 '10 at 07:37
Actually I think it's a conflict with the JQuery library – Jordan Aug 31 '10 at 07:59

score 3 · Answer 7 · edited Nov 12 '18 at 19:05

3

The jQuery documentation provides a detailed explanation for checked property vs attribute.

Accordingly, here is another way to retrieve selected radio button value

var accepted = $('input[name="Contact0_AmericanExpress"]:checked').val();

edited Nov 12 '18 at 19:05

Jeromy French

11,812
19
76
129

answered Jul 08 '16 at 17:24

Sudhir Bhapkar

931
8
7

score 3 · Answer 8 · answered May 15 '19 at 22:45

I could repro this by setting the name of input tag the same for two groups of input like below:

<body>
  <div>
      <div>
        <h3>Header1</h3>
      </div>
      <div>
          <input type="radio" name="gender" id="male_1" value="male"> Male<br>
          <input type="radio" name="gender" id="female_1" value="female" checked="checked"> Female<br>
          <input type="submit" value="Submit">
      </div>
  </div>


  <div>
      <div>
        <h3>Header2</h3>
      </div>
      <div>
          <input type="radio" name="gender" id="male_2" value="male"> Male<br>
          <input type="radio" name="gender" id="female_2" value="female" checked="checked"> Female<br>
          <input type="submit" value="Submit">
      </div>
  </div>
</body>

(To see this running, click here)

The following two solutions both fix the problem:

Use different names for the inputs in the second group
Use form tag instead of div tag for one of the groups (can't really figure out the real reason why this would solve the problem. Would love to hear some opinions on this!)

score 1 · Answer 9 · edited Sep 19 '19 at 14:33

**Radio button aria-checked: true or false one at a time**

$('input:radio[name=anynameofinput]').change(function() {
            if (this.value === 'value1') {
                $("#id1").attr("aria-checked","true");
                $("#id2").attr("aria-checked","false");
            }
            else if (this.value === 'value2') {;
                $("#id2").attr("aria-checked","true");
                $("#id1").attr("aria-checked","false");
            }
   });

score 1 · Answer 10 · edited Mar 04 '20 at 07:51

1

also try this way

$('input:radio[name="name"][id="abcd'+no+'"]').attr("checked", "checked");

if there is <form /> tag then ("checked", true) otherwise ("checked", "checked")

edited Mar 04 '20 at 07:51

THess

1,003
1
13
21

answered Mar 04 '20 at 07:31

Suman Guha Neogi

11
1

score 1 · Answer 11 · answered Jan 06 '12 at 22:22

hi I think if you put id attribute for the second input and give it a unique id value it will work

<label>Do you want to accept American Express?</label>
Yes<input id="amex" style="width: 20px;" type='radio' name='Contact0_AmericanExpress'   value='1'/>  
No<input style="width: 20px;" id="amex0" type='radio' name='Contact0_AmericanExpress' class='check' value='0' checked="checked"/>

score 0 · Answer 12 · edited Nov 15 '16 at 10:49

0

Your code is right, try to debug your JQuery script to find the issue! If you're using FF you can install an extension to debug JS (and JQuery) it's called FireBug.

edited Nov 15 '16 at 10:49

Nakilon

34,866
14
107
142

answered Aug 31 '10 at 13:28

thePanz

349
4
6

score -2 · Answer 13 · answered Jan 26 '14 at 14:22

-2

just add checked attribute to each radio that you want to have default checked

try this :

<input style="width: 20px;" type="radio" name="Contact0_AmericanExpress" class="check" checked/>

answered Jan 26 '14 at 14:22

parhamparsa

388
3
4

score -2 · Answer 14 · answered Aug 31 '10 at 07:06

-2

You're using non-standard xhtml code (values should be framed with double quotes, not single quotes)

Try this:

<form>
  <label>Do you want to accept American Express?</label>
  Yes<input id="amex" style="width: 20px;" type="radio" name="Contact0_AmericanExpress"  />  
  No<input style="width: 20px;" type="radio" name="Contact0_AmericanExpress" class="check" checked="checked" />
</form>

answered Aug 31 '10 at 07:06

Clément

12,299
15
75
115

thats's up to Jordan's doc type. regardless of that it'll still work in a xhtml doctype; it won't validate however. – Ben Rowe Aug 31 '10 at 07:10
I changed it just for kicks but I know that isn't the problem. Validation is nice but it won't solve this one. – Jordan Aug 31 '10 at 07:16
5

@CFP Actually, double or single quotes are allowed in standards compliant XHTML (transitional, strict, HTML5, etc). See: http://dev.w3.org/html5/html-author/#double-quote-attr – matthewpavkov Nov 18 '11 at 14:25

score -2 · Answer 15 · edited Apr 13 '20 at 08:57

-2

Replace checked="checked" with checked={true}. Or you could even shorten it to just checked.

This is because the expected value type of the checked prop is a boolean. not a string.

edited Apr 13 '20 at 08:57

Barry Michael Doyle

9,333
30
83
143

answered Apr 12 '20 at 21:43

mohammad inanloo

90
1
4

Radio Buttons "Checked" Attribute Not Working

15 Answers15

Linked