L'événement toggle de Jquery modifie la valeur de la case à cocher.

Question

J'utilise l'événement toggle de Jquery pour faire certaines choses lorsqu'un utilisateur clique sur une case à cocher, comme ceci :

$('input#myId').toggle(
function(){
//do stuff  
},
function(){
//do other stuff    
}
);

Le problème est que la case à cocher n'est pas cochée lorsque je clique dessus. (Tout ce que j'ai mis dans l'événement toggle fonctionne correctement).

J'ai essayé ce qui suit :

$('input#myId').attr('checked', 'checked');

et

$(this).attr('checked', 'checked');

et même simplement

return true;

Mais rien ne fonctionne. Quelqu'un peut-il me dire où je fais fausse route ?

Edit - merci à tous ceux qui ont répondu. La réponse de Dreas a pratiquement fonctionné pour moi, sauf pour la partie qui vérifie l'attribut. Ceci fonctionne parfaitement (même si c'est un peu compliqué).

$('input#myInput').change(function ()
{
    if(!$(this).hasClass("checked"))
    {
        //do stuff if the checkbox isn't checked
        $(this).addClass("checked");
        return;
    }

    //do stuff if the checkbox isn't checked
    $(this).removeClass('checked');
});

Merci encore à tous ceux qui ont répondu.

Answer 1

Utilisez le change au lieu de l'événement toggle événement, comme tel :

$('input#myId').change(function () {
    if ($(this).attr("checked")) {
        //do the stuff that you would do when 'checked'

        return;
    }
    //Here do the stuff you want to do when 'unchecked'
});

Answer 2

Pendant l'utilisation du change suggéré par Dreas Grech est approprié, il ne fonctionne pas bien dans IE 6 et 7, qui ne déclenche pas l'événement change jusqu'à ce que la mise au point soit floue (c'est-à-dire jusqu'à ce que vous cliquiez en dehors de la zone de la case à cocher). Comme QuirksMode dire, "c'est un bug sérieux".

Vous pouvez utiliser l'option click mais cela ne fonctionnera pas avec la navigation au clavier. Vous devez enregistrer un keyup manipulateur aussi...

Voir aussi cette question connexe .

Je n'ai pas encore trouvé de bonne solution inter-navigateurs qui prenne en charge les clics de souris et l'activation des cases à cocher par le clavier (et qui ne déclenche pas trop d'événements).

---

En ce qui concerne votre solution pour vérifier si la case à cocher est cochée ou non, au lieu d'ajouter votre propre checked vous pouvez utiliser la classe HTML checked attribut :

$('input#myInput').change(function () {
    if ($(this).attr("checked")) {
        //do stuff if the checkbox is checked
    } else {
        //do stuff if the checkbox isn't checked
    }
});

Tout navigateur définit le checked de l'attribut input à la valeur "checked" si la case à cocher est cochée, et lui donne la valeur suivante null (ou supprime l'attribut) si la case n'est pas cochée.

Answer 3

Pourquoi ne pas utiliser $.is() ?

$('input#myId').change(
    function() {
        if ($(this).is(':checked')) {
            // do stuff here 
        } else {
            // do other stuff here
        }
});

Answer 4

Il s'agit d'une réponse de MorningZ (je l'ai trouvée) ici ) qui est tout à fait logique :

La partie qui vous échappe est que "checkbox" est un objet jQuery, et non un objet DOM de type "checkbox". checkbox DOM

donc :

checkbox.checked serait certainement une erreur car il n'y a pas de .checked d'un objet jQuery

donc :

checkbox[0].checked fonctionnerait puisque le premier élément d'un tableau jQuery est l'objet DOM lui-même.

Donc, dans votre change() vous pouvez utiliser la fonction

$(this)[0].checked

Answer 5

$('input#myId').toggle(
  function(e){
    e.preventDefault();
    //do stuff      
    $(this).attr('checked', 'true');
  },
  function(e){
    e.preventDefault();
    //do other stuff        
    $(this).attr('checked', 'false');
  }
);