70 votes

Cliquez sur activer/désactiver avec jQuery

J’ai utilisé une fonction de vol stationnaire où vous faites x sur y, mouseover et mouseout. Je vais essayer la même chose pour cliquer, mais il ne semble pas fonctionner :

Je veux que la case à cocher à vérifier lorsque vous cliquez sur un `` , et if décochée cliqué encore une fois - un clic activer/désactiver.

214voto

karim79 Points 178055

Ceci se fait facilement en feuilletant le courant " vérifié l'état de la case à cocher à chaque clic. Exemples:

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox.attr('checked'));
 });

ou:

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox.is(':checked'));
 });

ou, en manipulant directement les DOM 'vérifié' de la propriété (c'est à dire n'utilisant pas d' attr() pour récupérer l'état actuel de l'cliqué sur une case):

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox[0].checked);
 });

...et ainsi de suite.

Remarque: depuis jQuery 1.6, cases à cocher doivent être définies à l'aide de prop pas attr:

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.prop('checked', !$checkbox[0].checked);
 });

27voto

Justin Tanner Points 5437

Une autre approche consisterait à jquery étendu comme ceci :

Ensuite, appelez :

11voto

Tim Santeford Points 10126

Avertissement: à l'aide attr() ou prop() pour changer l'état d'une case à cocher n'est pas le feu de l' événement de changement dans la plupart des navigateurs que j'ai testé avec. L'état coché va changer, mais pas de remontée d'événements. Vous devez déclencher l'événement de changement manuellement après la définition de l'attribut checked. J'ai eu quelques autres gestionnaires d'événements de la surveillance de l'état des cases à cocher et ils fonctionnent bien avec directe de l'utilisateur clique. Cependant, la mise en l'état activé par programme ne pas toujours déclencher le changement de l'événement.

jQuery 1.6

$('.offer').bind('click', function(){ 
    var $checkbox = $(this).find(':checkbox');
    $checkbox[0].checked = !$checkbox[0].checked;
    $checkbox.trigger('change'); //<- Works in IE6 - IE9, Chrome, Firefox
});

7voto

Marve Points 2471

Vous pouvez utiliser le `` fonction :

2voto

Thomas Seres Points 21

Pourquoi ne pas en une seule ligne ?

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X