Radio Buttons "Checked" Attribute Not Working

Solution 1:

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:

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

Solution 3:

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

Solution 4:

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:

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