Uncheck radio button on click using jquery

Question

Radio buttons are unchecked only at page refresh

<input type="radio" name="test">
    1<input type="radio" name="test">2
   <input type="button" id="btn" />

$("#btn").click(function(){

$(':radio').each(function () {
        $(this).removeAttr('checked');
        $('input[type="radio"]').attr('checked', false);
    })

}); 

I have created a fiddle http://jsfiddle.net/8jKJc/220/

But its not working with Bootstrap

Answer 1

Use .prop instead of .attr:

$('input[type="radio"]').prop('checked', false); 

[Demo]

Answer 2

Use this :

 $(this).prop('checked', false);
 //$('input[type="radio"]').attr('checked', false);

You can see this link for differentiate between .prop() with .attr(). .attr() suitable for accessing HTML element attributes like(name, id, class,etc..) and .prop() for DOM element properties that returned boolean value for most case.

From jQuery official page :

For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method. Prior to jQuery 1.6, these properties were retrievable with the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties.

Answer 3

using .prop() inbuild function.

$('input[type="radio"]').prop('checked', false);

Answer 4

It's easy use following will help you:

$("input:checked").removeAttr("checked");

Check your updated Fiddle Here

Answer 5

If you use jQuery > 1.5, you should use prop instead of attr.

$('input[type="radio"]').prop('checked', false);

Demo here.

See here for details.

Answer 6

.prop only sets properties, not attributes.

jQuery API

Or you can use is to do this

$("#btn").click(function(){
$("input[type='radio']").each(function() {
if($(this).is(':checked')){
  $(this).prop('checked',false);
   }
});
});