Traitement des événements liés aux cases à cocher dans jQuery

Question

J'ai les éléments suivants :

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

Comment puis-je utiliser jQuery pour capturer cualquier vérifier l'événement qui se produit dans myform et dire quelle case à cocher a été activée (et savoir si elle a été activée ou désactivée) ?

Answer 1

$('#myform :checkbox').click(function() {
    var $this = $(this);
    // $this will contain a reference to the checkbox   
    if ($this.is(':checked')) {
        // the checkbox was checked 
    } else {
        // the checkbox was unchecked
    }
});

Answer 2

Utilisez l'événement de changement.

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

Answer 3

Utilisation de la nouvelle méthode "on" de 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 se trouve sur
• capturera si la case à cocher a été modifiée par le clavier, et pas seulement par un clic.

Answer 4

$('#myform input:checkbox').click(
 function(e){
   alert($(this).is(':checked'))
 }
)

Answer 5

En reconnaissant le fait que le demandeur a spécifiquement demandé jQuery et que la réponse choisie est correcte, il convient de noter que ce problème n'a pas réellement besoin de jQuery par exemple. Si l'on souhaite résoudre ce problème sans lui, on peut simplement définir l'option onClick des cases à cocher auxquelles il souhaite ajouter une fonctionnalité supplémentaire, comme suit :

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/