2010-11-30 11 views
2

je cherche dans un grand nombre de sujets, mais je ne l'ai pas trouvé quelque chose qui correspond vraiment à mon problème:Comment décocher un bouton radio en cliquant sur une deuxième fois

Je veux faire des boutons radio invérifiables (c.-à-d. décochez un bouton radio en cliquant dessus quand il est déjà coché).

J'ai trouvé des solutions en utilisant un bouton radio caché comme objet de comparaison temporaire mais cela ne correspond pas à mon contexte existant, donc je voudrais faire la même chose sans un autre bouton radio.

J'ai essayé de tester simplement et changer l'état/valeur du bouton radio sur l'événement « onclick », mais il n'a pas été très ... Successfull

Merci à l'avance, Clem.

Répondre

2

Je sais que ce type d'action n'est pas standard pour les boutons radio, mais l'affiche a demandé la fonctionnalité. Ce qui suit est le code que j'ai utilisé dans le passé. Je l'ai trouvé ne pas être le plus optimisé (en supposant un grand nombre de boutons radio), mais je n'ai pas non plus pris le temps de faire cette optimisation.

// Allow for radio button unchecking 
$(function(){ 
    var allRadios = $('input[type=radio]') 
    var radioChecked; 

    var setCurrent = function(e) { 
     var obj = e.target; 
     radioChecked = $(obj).attr('checked'); 
    } 

    var setCheck = function(e) { 
     if (e.type == 'keypress' && e.charCode != 32) { 
      return false; 
     } 
     var obj = e.target; 
     if (radioChecked) { 
      $(obj).attr('checked', false); 
     } else { 
      $(obj).attr('checked', true); 
     } 
    } 

    $.each(allRadios, function(i, val) { 
     var label = $('label[for=' + $(this).attr("id") + ']'); 
     $(this).bind('mousedown keydown', function(e){ 
      setCurrent(e); 
     }); 

     label.bind('mousedown keydown', function(e){ 
      e.target = $('#' + $(this).attr("for")); 
      setCurrent(e); 
     }); 

     $(this).bind('click', function(e){ 
      setCheck(e);  
     }); 
    }); 
}); 
16

Ce ne sont pas les boutons radio. Si vous essayez de faire ce travail, vous allez juste confondre vos utilisateurs.

Si vous voulez quelque chose qui peut être coché puis décoché, utilisez une case à cocher. Les boutons radio servent à sélectionner exactement l'un des ensembles d'options.

+1

Je suis totalement d'accord. – karim79

+1

Que faire s'il veut le ramener à son état initial non sélectionné? Un peu déroutant pour l'utilisateur, mais une exigence compréhensible. –

+0

merci pour cette réactivité! – Clem

4

mieux ainsi:

onclick=" 
var isChecked = $(this).attr('is_che'); 
if (isChecked) { 
    $(this).removeAttr('checked'); 
    $(this).removeAttr('is_che'); 
} 
else { 
    $(this).attr('checked', 'checked'); 
    $(this).attr('is_che', 'true'); 
}" 
+0

Merci, vous avez raison, il semble que ce soit mieux pour l'optimisation du code! – Clem