Je veux qu'un événement se déclenche côté client lorsqu'une case est cochée / décochée:
$('.checkbox').click(function() {
if ($(this).is(':checked')) {
// Do stuff
}
});
Fondamentalement, je veux que cela se produise pour chaque case à cocher de la page. Cette méthode de tir sur le clic et de vérification de l'état est-elle correcte?
Je pense qu'il doit y avoir un moyen jQuery plus propre. Quelqu'un connaît une solution?
javascript
jquery
event-handling
AnonyMouse
la source
la source
Réponses:
Lier à l'
change
événement au lieu declick
. Cependant, vous devrez probablement toujours vérifier si la case est cochée ou non:Le principal avantage de la liaison à l'Expurgé dans les commentaireschange
événement par rapport à l'click
événement est que tous les clics sur une case à cocher ne la feront pas changer d'état. Si vous souhaitez uniquement capturer les événements qui entraînent un changement d'état de la case à cocher, vous souhaitez que l'change
événement porte bien son nom .Notez également que j'ai utilisé
this.checked
au lieu d'envelopper l'élément dans un objet jQuery et d'utiliser des méthodes jQuery, simplement parce qu'il est plus court et plus rapide d'accéder directement à la propriété de l'élément DOM.Modifier (voir commentaires)
Pour obtenir toutes les cases à cocher, vous avez deux options. Vous pouvez utiliser le
:checkbox
pseudo-sélecteur:Ou vous pouvez utiliser un sélecteur égal à un attribut :
la source
$(this).is(':checked')
. Je pensais que vous deviez utiliser l'change
événement si vous voulez détecter les changements du clavier (tabulation, espace de frappe), mais étonnamment,click
détecte également les changements qui ne proviennent pas d'un clic de souris, je ne sais pas si c'est une chose jQuery, jsfiddle.net / mendesjuan / E39szclick
,change
ou que ce soit à toutes les cases sur la page peut provoquer des problèmes de performance (depepending sur le montant des cases à cocher). Essayez de lier à l'élément parent ou au document et de capturer l'événement bouillonné, c'est$('form').on('change', ':checkbox', function(){ //stuff });
Pour toute référence future à toute personne éprouvant des difficultés, si vous ajoutez les cases à cocher de manière dynamique, la bonne réponse acceptée ci-dessus ne fonctionnera pas. Vous devrez tirer parti de la délégation d'événements qui permet à un nœud parent de capturer les événements bouillonnés d'un descendant spécifique et d'émettre un rappel.
Notez qu'il est presque toujours inutile d'utiliser
document
le sélecteur parent. Choisissez plutôt un nœud parent plus spécifique pour éviter de propager l'événement sur trop de niveaux.L'exemple ci-dessous montre comment les événements des nœuds dom ajoutés dynamiquement ne déclenchent pas les écouteurs définis précédemment.
Bien que cet exemple affiche l'utilisation de la délégation d'événements pour capturer des événements pour un nœud spécifique (
h1
dans ce cas) et émettre un rappel pour ces événements.la source
Juste une autre solution
la source
Si votre intention est d'attacher un événement uniquement sur les cases à cocher cochées (il se déclencherait alors lorsqu'elles ne sont pas cochées et vérifiées à nouveau plus tard), c'est ce que vous voulez.
si votre intention est d'attacher un événement à toutes les cases à cocher (cochées et décochées)
si vous voulez qu'il ne se déclenche que lorsqu'ils sont cochés (de non cochés), alors @James Allardice répondez ci-dessus.
BTW
input[type='checkbox']:checked
est un sélecteur CSS.la source
$("input[type='checkbox']:not(:checked)")
la source
la source
peut-être que cela peut être une alternative pour vous.
la source
C'est la solution à trouver si la case est cochée ou non. Utilisez la fonction #prop () //
la source
Essayez cette validation jQuery
la source
Est très simple, voici comment j'utilise:
JQuery:
Cordialement!
la source