Comment décocher un bouton radio?

J'ai un groupe de boutons radio que je souhaite décocher 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.

Au fait, j'ai également essayé $(this).val("");mais cela n'a pas fonctionné.

soit (plain js)

this.checked = false;

ou (jQuery)

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

Voir la page d'aide de jQuery prop () pour une explication sur 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.

Vous n'auriez pas besoin de la eachfonction

$("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 vous pourriez améliorer cela

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

Essayer

$(this).removeAttr('checked')

Étant donné que de nombreux navigateurs interpréteront «vérifié = n'importe quoi» comme vrai. Cela supprimera complètement l'attribut vérifié.

J'espère que cela t'aides.

Légère modification du plugin de Laurynas basé sur le code d'Igor. Cela prend en compte les étiquettes possibles 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);

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

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

Pour la radio et le 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');
        }
    });
});

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

Essayer

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

Vous pouvez également simuler le comportement du bouton radio en utilisant uniquement des 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 par vous-même sur: http://jsfiddle.net/almircampos/n1zvrs0c/

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

Mettez simplement 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 autre chose

Utilisez ceci

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

$('#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;

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

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

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É

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

Chaque fois que vous double-cliquez sur une radio cochée, la case cochée devient fausse

Mes radios commencent par id=radxxxxxxxxparce que j'utilise ce sélecteur d'identifiant.

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

Le bon sélecteur est: #frm input[type="radio"]:checked non#frm input[type="radio":checked]