Radio Buttons "Checked" Attribute Not Working

Html Problem Overview

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

Html Solutions

Solution 1 - Html

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>

Solution 2 - Html

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

Solution 3 - Html

This might be it:

https://stackoverflow.com/questions/15844852/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...

Solution 4 - Html

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

Solution 5 - Html

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

Solution 6 - Html

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?

Solution 7 - Html

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

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

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

[1]: http://api.jquery.com/prop/#entry-longdesc "jQuery Documentaion"

Solution 8 - Html

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

Solution 9 - Html

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

Solution 10 - Html

**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");
            }
   });

Solution 11 - Html

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

Solution 12 - Html

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.

Solution 13 - Html

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>

Solution 14 - Html

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

Solution 15 - Html

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.

Content Type	Original Author	Original Content on Stackoverflow
Question	Jordan	View Question on Stackoverflow
Solution 1 - Html	jeeves	View Answer on Stackoverflow
Solution 2 - Html	Michael Seltenreich	View Answer on Stackoverflow
Solution 3 - Html	Martin T.	View Answer on Stackoverflow
Solution 4 - Html	Lix	View Answer on Stackoverflow
Solution 5 - Html	Codemator	View Answer on Stackoverflow
Solution 6 - Html	Ben Rowe	View Answer on Stackoverflow
Solution 7 - Html	Sudhir Bhapkar	View Answer on Stackoverflow
Solution 8 - Html	Liutong Chen	View Answer on Stackoverflow
Solution 9 - Html	mentes	View Answer on Stackoverflow
Solution 10 - Html	user11097803	View Answer on Stackoverflow
Solution 11 - Html	Suman Guha Neogi	View Answer on Stackoverflow
Solution 12 - Html	thePanz	View Answer on Stackoverflow
Solution 13 - Html	Clément	View Answer on Stackoverflow
Solution 14 - Html	parhamparsa	View Answer on Stackoverflow
Solution 15 - Html	mohammad inanloo	View Answer on Stackoverflow