How to uncheck a radio button?

问题:

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.

回答1:

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.

回答2:

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(\"\");

回答3:

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.

回答4:

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

回答5:

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

回答6:

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

回答7:

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\');
        }
    });
});

回答8:

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

回答9:

Try

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

回答10:

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/

回答11:

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

回答12:

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

This is almost good but you missed the [0]

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

回答13:

You can use this JQuery for uncheck radiobutton

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

回答14:

Use this

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

回答15:

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

回答16:

$(\'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.

回答17:

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

The correct selector is: #frm input[type=\"radio\"]:checked not #frm input[type=\"radio\":checked]