web-dev-qa-db-fra.com

Gestion des événements de case à cocher jQuery

J'ai le suivant:

<form id="myform">
   <input type="checkbox" name="check1" value="check1">
   <input type="checkbox" name="check2" value="check2">
</form>

Comment utiliser jQuery pour capturer tout événement de contrôle se produisant dans myform et indiquer quelle case à cocher a été activée (et savoir si elle a été activée ou désactivée)?

jqueryhtmlcheckbox
133
aeq
$('#myform :checkbox').change(function() {
    // this will contain a reference to the checkbox   
    if (this.checked) {
        // the checkbox is now checked 
    } else {
        // the checkbox is now no longer checked
    }
});
227
Darin Dimitrov

Utilisez l'événement change.

$('#myform :checkbox').change(function() {
    // this represents the checkbox that was checked
    // do something with it
});
127
Anurag

Il existe plusieurs réponses utiles, mais aucune ne semble couvrir toutes les options latest . À cette fin, tous mes exemples tiennent également compte de la présence des éléments correspondants label et vous permettent également d'ajouter dynamiquement des cases à cocher et d'afficher les résultats dans un panneau latéral (en redirigeant console.log).

  • L'écoute des événements click sur checkboxes est not = une bonne idée, car cela ne permet pas le basculement au clavier ni les modifications apportées lorsqu'un élément label correspondant a été cliqué. Écoutez toujours l'événement change.

  • Utilisez le pseudo-sélecteur jQuery :checkbox plutôt que input[type=checkbox]. :checkbox est plus court et plus lisible.

  • Utilisez is() avec le pseudo-sélecteur jQuery :checked pour vérifier si une case à cocher est cochée. Ceci est garanti pour fonctionner sur tous les navigateurs.

Gestionnaire d'événements de base attaché aux éléments existants:

$('#myform :checkbox').change(function () {
    if ($(this).is(':checked')) {
        console.log($(this).val() + ' is now checked');
    } else {
        console.log($(this).val() + ' is now unchecked');
    }
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/2/

Remarques:

  • Utilise le sélecteur :checkbox, ce qui est préférable à l'utilisation de input[type=checkbox]
  • Ceci connecte seulement aux éléments correspondants qui existaient au moment où l'événement a été enregistré.

Gestionnaire d'événements délégué attaché à l'élément ancêtre:

Les gestionnaires d'événements délégués sont conçus pour les situations où les éléments peuvent ne pas exister (chargés ou créés dynamiquement) et où very utile. Ils delegate responsabilité envers un élément ancêtre (d'où le terme).

$('#myform').on('change', ':checkbox', function () {
    if ($(this).is(':checked')) {
        console.log($(this).val() + ' is now checked');
    } else {
        console.log($(this).val() + ' is now unchecked');
    }
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/4/

Remarques:

  • Cela fonctionne en écoutant les événements (dans ce cas, change) pour afficher un élément ancêtre inchangé (dans ce cas, #myform).
  • Il then applique le sélecteur jQuery (':checkbox' dans ce cas) uniquement aux éléments dans la chaîne de bulles .
  • Il then applique la fonction de gestionnaire d'événements uniquement aux éléments correspondants qui ont provoqué l'événement.
  • Utilisez document par défaut pour connecter le gestionnaire d'événements délégué, si rien d'autre n'est plus proche/pratique.
  • N'utilisez pas body pour attacher des événements délégués car il y a un bogue (lié au style) qui peut l'empêcher de recevoir des événements de souris.

Le résultat des gestionnaires délégués est que les éléments correspondants ne doivent exister que à l'heure de l'événement et pas lorsque le gestionnaire d'événements a été enregistré. Cela permet d'ajouter dynamiquement du contenu pour générer les événements.

Q: Est-ce que c'est plus lent?

A: Tant que les événements ont une vitesse d'interaction utilisateur, vous n'avez pas à vous soucier de la négligeable différence de vitesse entre un gestionnaire d’événements délégué et un gestionnaire directement connecté. Les avantages de la délégation dépassent de loin les inconvénients mineurs. Les gestionnaires d'événements délégués sont en fait est plus rapide à enregistrer car ils se connectent généralement à un seul élément correspondant.

Pourquoi prop('checked', true) ne déclenche-t-il pas l'événement change?

C'est en fait par conception. Si cela déclenche l'événement, vous vous retrouverez facilement dans une situation de mises à jour sans fin. Après avoir modifié la propriété cochée, envoyez un événement de modification au même élément en utilisant trigger (et non triggerHandler):

par exemple. sans trigger aucun événement ne se produit

$cb.prop('checked', !$cb.prop('checked'));

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/5/

par exemple. avec trigger l'événement de changement normal est intercepté

$cb.prop('checked', !$cb.prop('checked')).trigger('change');

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/6/

Notes:

  • N'utilisez pas triggerHandler comme l'a suggéré un utilisateur, car il ne fera pas en sorte que les événements soient masqués dans un délégué gestionnaire d'événements.

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/8/

bien que cela == fonctionne pour un gestionnaire d'événements directement connecté à l'élément:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/9/

Les événements déclenchés avec .triggerHandler () ne font pas apparaître la hiérarchie dans le DOM. S'ils ne sont pas gérés directement par l'élément cible, ils ne font rien.

Référence: http://api.jquery.com/triggerhandler/

Si quelqu'un a des fonctionnalités supplémentaires qui ne sont pas couvertes par ceci, merci de suggérer des ajouts .

47
Gone Coding

Utilisation de la nouvelle méthode 'on' dans jQuery (1.7): http://api.jquery.com/on/

    $('#myform').on('change', 'input[type=checkbox]', function(e) {
        console.log(this.name+' '+this.value+' '+this.checked);

    });
  • le gestionnaire d'événement vivra sur
  • va capturer si la case a été modifiée par le clavier, pas seulement cliquer
28
Allen Hamilton
$('#myform input:checkbox').click(
 function(e){
   alert($(this).is(':checked'))
 }
)
5
Thinker

Reconnaissant le fait que le demandeur a spécifiquement demandé jQuery et que la réponse sélectionnée est correcte, il convient de noter que ce problème ne nécessite pas réellement de jQuery per say . Si on veut résoudre ce problème sans cela, on peut simplement définir l'attribut onClick des cases à cocher auxquelles il souhaite ajouter des fonctionnalités supplémentaires, comme ceci:

HTML:

<form id="myform">
  <input type="checkbox" name="check1" value="check1" onClick="cbChanged(this);">
  <input type="checkbox" name="check2" value="check2" onClick="cbChanged(this);">
</form>

javascript:

function cbChanged(checkboxElem) {
  if (checkboxElem.checked) {
    // Do something special
  } else {
    // Do something else
  }
}

Violon: http://jsfiddle.net/Y9f66/1/

4
Chase Sandmann

J'ai essayé le code de la première réponse, ça ne marche pas mais j'ai joué et ça marche pour moi

$('#vip').change(function(){
    if ($(this).is(':checked')) {
        alert('checked');
    } else {
        alert('uncheck');
    }
});
0
Somwang Souksavatd