Bascule le statut des boutons radio dans jQuery

Je souhaite étendre légèrement les fonctions des boutons radio, c’est-à-dire la possibilité de décocher (au clic, si elle a déjà été cochée).

Le code HTML est comme –

            

jQuery jusqu’à présent est –

 $('.option_selector').click(function () { var id = $(this).attr('id'); if($('#' + id).is(':checked')) { $("#" + id).prop("checked", false); } else { $("#" + id).prop("checked", true); } }); 

Je sais pourquoi cela ne fonctionne pas – parce que chaque fois que je clique sur le bouton radio, son statut initial sera vérifié, donc le statut final ne sera pas coché. Mais, je n’ai pas réussi à le faire fonctionner de la manière souhaitée.

ps – Pour ceux qui se demandent pourquoi je n’utilise pas de cases à cocher au lieu de boutons radio: j’essaie de reproduire le quiz (à des fins de pratique) de Mon corps d’examinateur actuel. Les gens n’utilisent pas les cases à cocher, utilisent plutôt des boutons radio avec une fonctionnalité supplémentaire consistant à désélectionner l’option. Donc, j’essaie simplement d’éviter toute confusion inutile.

Edit – 1: Cela peut ou non être une copie de la question mentionnée. Mais la solution dans la question mentionnée fonctionne sur la base du “groupe de radios désélectionnables par leur nom”, ce qui ne résout pas mon problème.

Vous pouvez combiner l’événement click et utiliser un data-atsortingbute pour garder une trace de l’état des boutons radio:

 $('.option_selector').on('click', function() { var id = this.id; if( $(this).data('checked') ) { $(this).prop('checked', false); $(this).data('checked', false); } else { $(this).data('checked', true); } console.log( id ); $(':radio[name=' + this.name + ']').not(this).data('checked', false); }); 
 //another way to re-write the code $('.option_selector').on('click', function() { var id = this.id; var waschecked = $(this).data('checked'); if( waschecked ) { $(this).prop('checked', false); } $(this).data('checked', !waschecked) console.log( id ); $(':radio[name=' + this.name + ']').not(this).data('checked', false); }); 
        

Je pense que la seule chose que vous devez faire est de vérifier si elle est cochée. N’incluez pas la déclaration else.

 if($(this).is(':checked')) $(this).prop('checked', false); 

Vous pouvez également utiliser le attr comme ceci:

 $('.option_selector').click(function () { var id = $(this).attr('id'); if($('#' + id).attr('checked')) { $("#" + id).attr("checked", false); } else { $("#" + id).attr("checked", true); } }); 

http://jsfiddle.net/sandenay/mqpqgfL3/