How to uncheck a radio button?

Question

I have group of radio buttons that I want to uncheck after an AJAX form is submitted using jQuery. I have the following function:

function clearForm(){
  $('#frm input[type="text"]').each(function(){
      $(this).val("");  
  });
  $('#frm input[type="radio":checked]').each(function(){
      $(this).checked = false;  
  });
 }

With the help of this function, I can clear the values at the text boxes, but I can't clear the values of the radio buttons.

By the way, I also tried $(this).val(""); but that didn't work.

You wouldn't need the each function. You could just call the function you want upon the jQuery object. See my answer below — James Wiseman, Jan 22 '10 at 13:55
no need for each() function.. jQuery("input:radio").removeAttr("checked"); — Jitendra Damor, Jun 04 '15 at 06:23

score 841 · Accepted Answer · edited Aug 09 '11 at 13:21

841

either (plain js)

this.checked = false;

or (jQuery)

$(this).prop('checked', false);
// Note that the pre-jQuery 1.6 idiom was
// $(this).attr('checked', false);

See jQuery prop() help page for an explanation on the difference between attr() and prop() and why prop() is now preferable.
prop() was introduced with jQuery 1.6 in May 2011.

edited Aug 09 '11 at 13:21

mjv

73,152
14
113
156

answered Jan 22 '10 at 13:47

David Hedlund

128,221
31
203
222

29

PPL, be aware that his behavior is changing on 1.6 in favor of `prop()`, while `.attr()` will be restricted to actual attributes – Fabiano Soriani May 04 '11 at 23:27
1

So is it best to use plain JS here? – Doug Molineux Jun 10 '11 at 16:46
15

@Pete: I would say that if you have a system built up on jQuery, then the additional advantage that gives you is that if there is ever a browser that handles this differently, you will be able to delegate the browser support to the library. However, if your software doesn't currently use jQuery, it wouldn't be worth the overhead to actually include the library just for this. – David Hedlund Jun 11 '11 at 02:31
@David Hedlund : I suppose you are implying that all major browsers handle this the same way as of today, right? – Shawn Nov 06 '12 at 15:58
The jQuery version doesn't work for me in Chrome with jQuery 1.9. It has no effect on the radio button. The plain JS version however does work. – qris Mar 15 '13 at 13:04
2

@qris: Your problem is probably somewhere else. [Simple demo, using jQuery 1.9](http://jsfiddle.net/CRszR/). Sure works in my Chrome. – David Hedlund Mar 15 '13 at 13:58
ASs of 2020, This is still working. your welcome XD – Jovylle Sep 23 '20 at 12:31

score 97 · Answer 2 · answered Jan 22 '10 at 13:49

97

You wouldn't need the each function

$("input:radio").attr("checked", false);

Or

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

The same should also apply to your textbox:

$('#frm input[type="text"]').val("");

But you could improve this

$('#frm input:text').val("");

answered Jan 22 '10 at 13:49

James Wiseman

29,946
17
95
158

2

.removeAttr is likely to cause problems. – Kzqai May 07 '13 at 21:30
Care to expand on how? Or provide a link? – James Wiseman May 08 '13 at 08:42
Yes, Kzqai, I am also curious my answer was down-voted for this as well. The documentation mentions no risk. – cjstehno May 08 '13 at 12:41
1

Relevant documentation is actually on the .prop() method: http://api.jquery.com/prop/ Quote "Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute. Examples include the value property of input elements, the disabled property of inputs and buttons, or the checked property of a checkbox. The .prop() method should be used to set disabled and checked instead of the .attr() method. The .val() method should be used for getting and setting value." This means that... – Kzqai May 08 '13 at 17:09
1

...This means that .attr() will be altering a different underlying source than .prop(), the serialized html attribute instead of the DOM, and while this may be compatible now (e.g. jQuery 1.9 may modify both when when .attr() is used), that's no guarantee it will be upkept to modify both in the future when .prop() is canonical. For example, if you use .attr('checked', false); and a library you use includes .prop('checked', true);, there's going to be an inherent conflict that could cause annoying bugs. – Kzqai May 13 '13 at 21:27

score 30 · Answer 3 · answered Jan 22 '10 at 13:49

30

Try

$(this).removeAttr('checked')

Since a lot of browsers will interpret 'checked=anything' as true. This will remove the checked attribute altogether.

Hope this helps.

answered Jan 22 '10 at 13:49

cjstehno

13,468
4
44
56

Also, as one of the other answers mentions, you wont need the each function; you could just chain the removeAttr call to the selector. – cjstehno Jan 22 '10 at 13:55
7

NOTE: this response is from 2010. At that time, this was a valid and accepted approach. Since then it has become deprecated. – cjstehno Aug 26 '13 at 12:11

igor · Answer 4 · 2017-05-30T07:58:05.503

Thanks Patrick, you made my day! It's mousedown you have to use. However I've improved the code so you can handle a group of radio buttons.

//We need to bind click handler as well
//as FF sets button checked after mousedown, but before click
$('input:radio').bind('click mousedown', (function() {
    //Capture radio button status within its handler scope,
    //so we do not use any global vars and every radio button keeps its own status.
    //This required to uncheck them later.
    //We need to store status separately as browser updates checked status before click handler called,
    //so radio button will always be checked.
    var isChecked;

    return function(event) {
        //console.log(event.type + ": " + this.checked);

        if(event.type == 'click') {
            //console.log(isChecked);

            if(isChecked) {
                //Uncheck and update status
                isChecked = this.checked = false;
            } else {
                //Update status
                //Browser will check the button by itself
                isChecked = true;

                //Do something else if radio button selected
                /*
                if(this.value == 'somevalue') {
                    doSomething();
                } else {
                    doSomethingElse();
                }
                */
            }
    } else {
        //Get the right status before browser sets it
        //We need to use onmousedown event here, as it is the only cross-browser compatible event for radio buttons
        isChecked = this.checked;
    }
}})());

alkos333 · Answer 5 · 2011-11-30T14:40:20.567

Slight modification of Laurynas' plugin based on Igor's code. This accommodates possible labels associated with the radio buttons being targeted:

(function ($) {
    $.fn.uncheckableRadio = function () {

        return this.each(function () {
            var radio = this;
                $('label[for="' + radio.id + '"]').add(radio).mousedown(function () {
                    $(radio).data('wasChecked', radio.checked);
                });

                $('label[for="' + radio.id + '"]').add(radio).click(function () {
                    if ($(radio).data('wasChecked'))
                        radio.checked = false;
                });
           });
    };
})(jQuery);

It dependends on how the labels are used, if they use IDs then this code works, if the radio button is nested in the label it doesn't. You can use this even more enhanced version : https://gist.github.com/eikes/9484101 — eikes, Mar 11 '14 at 11:44

score 20 · Answer 6 · answered Sep 18 '11 at 13:56

20

Rewrite of Igor's code as plugin.

Use:

$('input[type=radio]').uncheckableRadio();

Plugin:

(function( $ ){

    $.fn.uncheckableRadio = function() {

        return this.each(function() {
            $(this).mousedown(function() {
                $(this).data('wasChecked', this.checked);
            });

            $(this).click(function() {
                if ($(this).data('wasChecked'))
                    this.checked = false;
            });
        });

    };

})( jQuery );

answered Sep 18 '11 at 13:56

Laurynas

3,829
2
32
22

Unselecting doesn't work if I'm clicking on the label. So while it is possible to select a radio by clicking on the label, unselecting only works by clicking on the radio button itself. – Simon Hürlimann Jun 28 '13 at 07:39
@alkos333 has a solution that seems to work with labels, too. – Simon Hürlimann Jun 28 '13 at 07:40
It dependends on how the labels are used, if they use IDs then @alkos333 code works, if the radio button is nested in the label, use this version: https://gist.github.com/eikes/9484101 – eikes Mar 11 '14 at 11:43

score 18 · Answer 7 · edited Oct 30 '12 at 11:49

For radio and radio group:

$(document).ready(function() {
    $(document).find("input:checked[type='radio']").addClass('bounce');   
    $("input[type='radio']").click(function() {
        $(this).prop('checked', false);
        $(this).toggleClass('bounce');

        if( $(this).hasClass('bounce') ) {
            $(this).prop('checked', true);
            $(document).find("input:not(:checked)[type='radio']").removeClass('bounce');
        }
    });
});

score 14 · Answer 8 · answered Oct 01 '10 at 11:02

Try this, this will do the trick:

        $(document).ready(function() {
           $("input[type='radio']").mousedown(function(e) {
                if ($(this).attr("checked") == true) {
                   setTimeout("$('input[id=" + $(this).attr('id') + "]').removeAttr('checked');", 200);}
                else {
                    return true
                }
            });
        });

score 12 · Answer 9 · answered Jan 22 '10 at 13:47

12

Try

$(this).attr("checked" , false );

answered Jan 22 '10 at 13:47

rahul

184,426
49
232
263

score 11 · Answer 10 · edited Jun 30 '17 at 14:38

You can also simulate the radiobutton behavior using only checkboxes:

<input type="checkbox" class="fakeRadio" checked />
<input type="checkbox" class="fakeRadio" />
<input type="checkbox" class="fakeRadio" />

Then, you can use this simple code to work for you:

$(".fakeRadio").click(function(){
    $(".fakeRadio").prop( "checked", false );
    $(this).prop( "checked", true );
});

It works fine and you have more control over the behavior of each button.

You can try it by yourself at: http://jsfiddle.net/almircampos/n1zvrs0c/

This fork also let's you unselect all as requested in a comment: http://jsfiddle.net/5ry8n4f4/

This is great, except you cannot uncheck all the boxes. – Stefan Nov 28 '16 at 10:05 — Stefan, Nov 28 '16 at 10:05

CrsCaballero · Answer 11 · 2017-06-14T15:17:19.820

7

Use this

$("input[name='nameOfYourRadioButton']").attr("checked", false);

edited Jun 14 '17 at 15:17

answered Jan 09 '17 at 19:59

CrsCaballero

2,124
1
24
31

score 7 · Answer 12 · answered Oct 16 '18 at 06:50

7

You can use this JQuery for uncheck radiobutton

$('input:radio[name="IntroducerType"]').removeAttr('checked');
                $('input:radio[name="IntroducerType"]').prop('checked', false);

answered Oct 16 '18 at 06:50

keivan kashani

1,263
14
15

Jitendra Damor · Answer 13 · 2015-04-09T11:21:46.537

6

Just put the following code for jQuery :

jQuery("input:radio").removeAttr("checked");

And for javascript :

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

There is no need to put any foreach loop , .each() fubction or any thing

edited Apr 09 '15 at 11:21

answered Apr 09 '15 at 07:04

Jitendra Damor

774
17
27

2

You realise that `$("input:radio").removeAttr("checked"); isn’t plain JavaScript, don’t you? – Manngo Jul 24 '23 at 02:27

score 5 · Answer 14 · edited Dec 20 '13 at 18:55

5

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

This is almost good but you missed the [0]

Correct ->> $(this)[0].checked = false;

edited Dec 20 '13 at 18:55

bummi

27,123
14
62
101

answered Dec 20 '13 at 18:16

alecellis1985

131
2
15

3

or simply: ```this.checked = false;``` – eikes Mar 11 '14 at 11:45

score 1 · Answer 15 · answered Jun 16 '14 at 14:43

function setRadio(obj) 
{
    if($("input[name='r_"+obj.value+"']").val() == 0 ){
      obj.checked = true
     $("input[name='r_"+obj.value+"']").val(1);
    }else{
      obj.checked = false;
      $("input[name='r_"+obj.value+"']").val(0);
    }

}

<input type="radio" id="planoT" name="planoT[{ID_PLANO}]" value="{ID_PLANO}" onclick="setRadio(this)" > <input type="hidden" id="r_{ID_PLANO}" name="r_{ID_PLANO}" value="0" >

:D

score -2 · Answer 16 · edited Sep 23 '15 at 09:16

-2

$('input[id^="rad"]').dblclick(function(){
    var nombre = $(this).attr('id');
    var checked =  $(this).is(":checked") ;
    if(checked){
        $("input[id="+nombre+"]:radio").prop( "checked", false );
    }
});

Every time you have a double click in a checked radio the checked changes to false

My radios begin with id=radxxxxxxxx because I use this id selector.

edited Sep 23 '15 at 09:16

William Isted

11,641
4
30
45

answered Aug 13 '14 at 16:11

Eduardo Andres Mesa Caceres

11

3

Please write the answer in (understandable) english. – ericbn Aug 13 '14 at 16:20
@ericbn what if someone doesn't know English? – talha2k Jan 28 '18 at 05:49
@AlphaMale english is the official language on this site. – Cristik Jun 04 '20 at 10:38
@Cristik Not all programmers come from "English" speaking countries. Does that mean they can't post on this forum? Secondly, it's Been 2 years mate. Thanks for enlightening me tho. – talha2k Jun 06 '20 at 21:05

How to uncheck a radio button?

16 Answers16

Linked

Related