web-dev-qa-db-fra.com

Comment décocher un bouton radio?

Je souhaite décocher un groupe de boutons radio après l'envoi d'un formulaire AJAX à l'aide de jQuery. J'ai la fonction suivante:

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

Avec l'aide de cette fonction, je peux effacer les valeurs dans les zones de texte, mais je ne peux pas effacer les valeurs des boutons radio.

A propos, j’ai aussi essayé $(this).val(""); mais cela n’a pas fonctionné.

javascriptjqueryradio-buttondynamic-forms
446
systemsfault

soit (plaine js)

this.checked = false;

ou (jQuery)

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

Voir page d'aide de jQuery prop () pour une explication de la différence entre attr () et prop () et pourquoi prop () est maintenant préférable.
prop () a été introduit avec jQuery 1.6 en mai 2011.

686
David Hedlund

Vous n'avez pas besoin de la fonction each

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

Ou

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

La même chose devrait également s'appliquer à votre zone de texte:

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

Mais tu pourrais améliorer ça

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

Essayer

$(this).removeAttr('checked')

Étant donné que beaucoup de navigateurs vont interpréter "vérifié = n'importe quoi" comme étant vrai. Cela supprimera complètement l'attribut coché.

J'espère que cela t'aides.

29
cjstehno

Légère modification du plugin de Laurynas basée sur le code d'Igor. Cela permet d’adapter les étiquettes associées aux boutons radio ciblés:

(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);
20
alkos333

Merci Patrick, tu as fait ma journée! C'est la souris que vous devez utiliser. Cependant, j'ai amélioré le code afin que vous puissiez gérer un groupe de boutons radio.

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

Réécriture du code d'Igor en plugin.

Utilisation:

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

Brancher:

(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 );
17
Laurynas

Pour radio et groupe radio:

$(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');
        }
    });
});
16
Sylvain Kocet

Essayez ceci, cela fera l'affaire:

        $(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
                }
            });
        });
14
Patrick Rietveld

Essayer

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

Vous pouvez également simuler le comportement du radiobutton en utilisant uniquement les cases à cocher:

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

Ensuite, vous pouvez utiliser ce code simple pour travailler pour vous:

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

Cela fonctionne bien et vous avez plus de contrôle sur le comportement de chaque bouton.

Vous pouvez l'essayer vous-même à l'adresse suivante: http://jsfiddle.net/almircampos/n1zvrs0c/

Cette fourche vous permet également de tout désélectionner comme demandé dans un commentaire: http://jsfiddle.net/5ry8n4f4/

9
Almir Campos

Il suffit de mettre le code suivant pour jQuery:

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

Et pour javascript:

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

Il n'est pas nécessaire de mettre une boucle foreach, une fonction .each () ou quoi que ce soit

6
Jitendra Damor

Utilisez ceci

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

Vous pouvez utiliser ce JQuery pour décocher le bouton radio

$('input:radio[name="IntroducerType"]').removeAttr('checked');
                $('input:radio[name="IntroducerType"]').prop('checked', false);
4
keivan kashani
$('#frm input[type="radio":checked]').each(function(){
   $(this).checked = false;  
  });

C'est presque bien mais vous avez raté le [0]

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

4
alecellis1985
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" >

:RÉ

1
Menotti