Désélectionner le bouton radio

Je suis venu avec ce code:

 var prev = {}; $("input[name=things]").click(function(){ if (prev && prev.value == this.value) { $(this).prop('checked', !prev.status); } prev = { value: this.value, status: this.checked }; }); 

Malheureusement, j'ai dû utiliser une variable supplémentaire pour stocker la propriété contrôlée car lorsque l'événement de clic est déclenché, la propriété checked est toujours vraie.

http://jsfiddle.net/syH46/11/

Je sais que cette question a été posée en février, mais j'ai trouvé cette information intéressante et j'aimerais partager avec vous:

Boutons radio

Les boutons de radio sont comme des cases à cocher, sauf que lorsque plusieurs partagent le même nom de contrôle, ils s'excluent mutuellement: lorsque l'on est "activé", tous les autres avec le même nom sont désactivés. L'élément INPUT est utilisé pour créer un contrôle de bouton radio.

Si aucun bouton radio d'un ensemble partageant le même nom de contrôle n'est initialement activé, le comportement de l'agent utilisateur pour choisir le contrôle initialement activé est indéfini. Remarque. Étant donné que les implémentations existantes traitent cette affaire différemment, la spécification actuelle diffère de RFC 1866 ([RFC1866] section 8.1.2.4), qui indique: En tout temps, l'un des boutons radio d'un ensemble est vérifié. Si aucun des éléments d'un ensemble de boutons radio spécifie `CHECKED ', l'agent utilisateur doit d'abord vérifier le premier bouton radio de l'ensemble.

Étant donné que le comportement de l'agent utilisateur diffère, les auteurs doivent s'assurer que, dans chaque jeu de boutons radio, l'un est initialement activé.

Source de l'information

Voici un joli hack:

 <input type="radio" name="Name1" value="Value1" onmousedown="this.c=this.checked" onclick="if (this.c) { this.checked = false }" /> 

Ce code devrait fonctionner comme HTML, mais vous pouvez également attacher les événements en javascript ou jquery avec une logique supplémentaire si nécessaire.

Les boutons radio sont conçus de manière à ce qu'un membre du groupe soit toujours contrôlé. S'il y a trois options, vous devriez avoir trois boutons radio:

 <input type="radio" name="things" value="exam" id="things_exam"> <label for="things_exam">exam</label> <input type="radio" name="things" value="journey" id="things_journey"> <label for="things_journey">journey</label> <input type="radio" name="things" value="" id="things_neither" checked><!-- note checked attribute, this is the default, one member of the group should always be checked --> <label for="things_neither">neither</label> 

Il existe des façons de contourner cela, mais pas de façon fiable, et non sans violer les attentes des utilisateurs quant à la façon dont l'interface utilisateur fonctionne.

http://jsfiddle.net/syH46/4/

Utilisez la fonction en direct … Le gestionnaire reste attaché à l'événement tout au long.

Cela devrait vous résoudre:

Comment décocher un bouton radio?

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

J'espère que cela pourra aider 🙂