Comment désélectionner un bouton radio?

Question

J'ai un groupe de boutons radio que je veux désélectionner 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. Par ailleurs, j'ai également essayé $(this).val(""); mais cela n'a pas fonctionné.

Answer 1

soit (js plaine)

this.checked = false; 

ou (jQuery)

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

Voir jQuery prop() help page 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.

Answer 2

Essayez

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

Answer 3

Vous ne voudriez pas besoin de la fonction each

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

Ou

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

La même chose devrait également demander à votre zone de texte:

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

Mais vous co ULD améliorer cette

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

Answer 4

Essayez

$(this).removeAttr('checked') 

Comme beaucoup de navigateurs interpréteront 'checked = rien' comme vrai. Cela supprimera complètement l'attribut checked.

Espérons que cela aide.

Answer 5

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

Answer 6

Merci Patrick, vous avez fait ma journée! C'est mousedown 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; 
    } 
}})()); 

Answer 7

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

Utilisation:

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

Answer 8

modification légère du plugin Laurynas basé sur le code d'Igor.Cette accommode les étiquettes possibles associées aux boutons radio étant 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); 

Answer 9

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

Answer 10

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

C'est presque bon, mais vous avez manqué le [0]

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

Answer 11

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

Answer 12

$('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 avez un double clic dans une radio vérifié les changements vérifiés false

Mes radios commencent par id=radxxxxxxxx parce que j'utilise ce sélecteur id.

Answer 13

Vous pouvez également simuler le comportement de 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 à travailler pour vous:

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

Il fonctionne très bien et vous avez plus de contrôle sur le comportement de chaque bouton.

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

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

Answer 14

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

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

Answer 15

Il suffit de mettre le code suivant pour jQuery:

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

Et javascript:

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

Il n'y a pas besoin de mettre une boucle foreach, .each() fubction ou quelque chose

Answer 16

Utilisez cette

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