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

Umesh Sehta · Answer 1 · 2018-08-13T16:27:35.003

17

Use .prop instead of .attr:

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

[Demo]

edited Aug 13 '18 at 16:27

answered Aug 24 '15 at 09:22

Umesh Sehta

10,555
5
39
68

score 5 · Answer 2 · edited May 23 '17 at 11:45

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.

score 3 · Answer 3 · answered Aug 24 '15 at 09:50

3

using .prop() inbuild function.

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

answered Aug 24 '15 at 09:50

score 2 · Answer 4 · answered Aug 24 '15 at 09:23

2

It's easy use following will help you:

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

Check your updated Fiddle Here

answered Aug 24 '15 at 09:23

ketan

19,129
42
60
98

score 2 · Answer 5 · answered Aug 24 '15 at 09:24

2

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.

answered Aug 24 '15 at 09:24

Andrea Salicetti

2,423
24
37

score 0 · Answer 6 · answered Aug 24 '15 at 12:00

0

.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);
   }
});
});

answered Aug 24 '15 at 12:00

Varun

597
7
26

can you please create a JSFiddle for this ? – Varun Aug 24 '15 at 12:57

score 0 · Answer 7 · answered Jul 21 '23 at 08:15

If you want to check a radio button when it's unchecked and uncheck it when it's checked, there's a catch. As soon as you click on the input, the value is set to true, so the expected behaviour cannot be achieved. So first you have to block the action of the click, then use the "mousedown" and "mouseup" events to stealthily detect the state of the input. Idem for label

https://jsfiddle.net/greatalf/k7cwfemp/4/

<!DOCTYPE html>
<html>
<head>
    <title>Uncheck radio button</title>
</head>
<body>

    <input type="radio" name="options" value="option1" id="option1">
    <label for="option1">Option 1</label><br>

    <input type="radio" name="options" value="option2" id="option2">
    <label for="option2">Option 2</label><br>

    <input type="radio" name="options" value="option3" id="option3">
    <label for="option3">Option 3</label><br>
    
</body>
</html>

    $('label').click(function(e) {
        e.preventDefault()
    
        var inputId = '#' + $(this).attr("for");
        if( $(inputId).prop("checked") === true )
        {
            $(inputId).prop("checked", false);
        }
        else {
            $(inputId).prop("checked", true);
        }
    });
    
    $('input[type="radio"]').on('click', function(e) {
        e.preventDefault()
    })
    $('input[type="radio"]').on('mousedown', function(e) {
    
        if( $(this).prop("checked") === true )
        {
            $(this).prop("checked", false);
        }
        else {
            $(this).prop("checked", true);
        }
    });
    $('input[type="radio"]').on('mouseup', function(e) {
    
        if( $(this).prop("checked") === false )
        {
            $(this).prop("checked", false);
        }
    });

Uncheck radio button on click using jquery

7 Answers7