Attraper un événement de changement coché d'une case à cocher

125

Comment attraper un événement check / uncheck <input type="checkbox" />avec jQuery?

jquery unchecked

— OMG
source

1

Si vous utilisez une version relativement nouvelle de JQuery, j'utiliserais le .on ('change', function () {...}) comme mentionné dans la réponse de @Daniel De Leon ci-dessous. Un avantage, l'écouteur d'événement «on» se liera au html généré dynamiquement.

— BLang

172

<input type="checkbox" id="something" />

$("#something").click( function(){
   if( $(this).is(':checked') ) alert("checked");
});

Modifier: cela ne capturera pas lorsque la case à cocher change pour d'autres raisons qu'un clic, comme l'utilisation du clavier. Pour éviter ce problème, écoutez changeplutôt que click.

Pour vérifier / décocher par programme, jetez un œil à Pourquoi mon événement de modification de case à cocher n'est-il pas déclenché?

— Marcgg
source

document.getElementById ('quelque chose'). vérifié fonctionne, pourquoi $ ('# quelque chose'). vérifié ne fonctionne pas?

— omg

Votre code n'a pas de paran et devrait vraiment utiliser la méthode jQuery pour obtenir l'état de vérification.

— Pete Michaud

2

Shore: la raison pour laquelle getElementById fonctionne est qu'il renvoie un élément DOM, alors que la fonction $ jQuery renvoie un objet jQuery. L'objet jQuery a l'élément DOM comme propriété, mais ce n'est pas lui-même un objet DOM.

— Pete Michaud

3

Je sais que j'arrive en retard à la fête, mais cela ne fonctionne que lorsqu'un événement "clic" le déclenche. Si, pour une raison quelconque, vous deviez faire quelque chose comme ça ailleurs dans le code: $ ("# something"). Attr ("checked", "checked"), l'événement de clic ne serait jamais déclenché.

— David Stinemetze le

3

@DavidStinemetze: Je dirais que vous pouvez écouter tonne changeau lieu de cliquer. Je mets à jour la réponse

— marcgg

44

Le clic affectera une étiquette si nous en avons une attachée à la case d'entrée?

Je pense qu'il vaut mieux utiliser la fonction .change ()

<input type="checkbox" id="something" />

$("#something").change( function(){
  alert("state changed");
});

— Dídac Rios
source

1

Cela devrait être la réponse acceptée, car la question porte sur l'écoute d'un événement de contrôle et non d'un événement de clic.

— Jessica

26

Utilisez le sélecteur : vérifié pour déterminer l'état de la case à cocher:

$('input[type=checkbox]').click(function() {
    if($(this).is(':checked')) {
        ...
    } else {
        ...
    }
});

— karim79
source

13

Pour JQuery 1.7+, utilisez:

$('input[type=checkbox]').on('change', function() {
  ...
});

— Daniel De León
source

4

Utilisez l'extrait de code ci-dessous pour y parvenir:

$('#checkAll').click(function(){
  $("#checkboxes input").attr('checked','checked');
});

$('#UncheckAll').click(function(){
  $("#checkboxes input").attr('checked',false);
});

Ou vous pouvez faire la même chose avec une seule case à cocher:

$('#checkAll').click(function(e) {
  if($('#checkAll').attr('checked') == 'checked') {
    $("#checkboxes input").attr('checked','checked');
    $('#checkAll').val('off');
  } else {
    $("#checkboxes input").attr('checked', false);
    $('#checkAll').val('on'); 
  }
});

Pour la démo: http://jsfiddle.net/creativegala/hTtxe/

— Arun Kumar
source

3

D'après mon expérience, j'ai dû tirer parti de la cible actuelle de l'événement:

$("#dingus").click( function (event) {
   if ($(event.currentTarget).is(':checked')) {
     //checkbox is checked
   }
});

— Brandon Aaskov
source

3

Ce code fait ce dont vous avez besoin:

<input type="checkbox" id="check" >check it</input>

$("#check").change( function(){
   if( $(this).is(':checked') ) {
        alert("checked");
    }else{
        alert("unchecked");
   }
});

Vous pouvez également le vérifier sur jsfiddle

— Deepak saini
source

2

utiliser l'événement click pour une meilleure compatibilité avec MSIE

$(document).ready(function() {
    $("input[type=checkbox]").click(function() {
        alert("state changed");
    });
});

— Ty W
source

Comment juger si c'est coché ou non?

— omg le

J'ai besoin de savoir si un clic signifie le cocher ou le décocher.

— omg le

1

vous pouvez ensuite utiliser $ (this) .is (': checked') pour tester l'état de l'élément sur lequel vous venez de cliquer

— Ty W

-1

$(document).ready(function(){
    checkUncheckAll("#select_all","[name='check_boxes[]']");
});

var NUM_BOXES = 10;
// last checkbox the user clicked
var last = -1;
function check(event) {
  // in IE, the event object is a property of the window object
  // in Mozilla, event object is passed to event handlers as a parameter
  event = event || window.event;

  var num = parseInt(/box\[(\d+)\]/.exec(this.name)[1]);
  if (event.shiftKey && last != -1) {
    var di = num > last ? 1 : -1;
    for (var i = last; i != num; i += di)
      document.forms.boxes['box[' + i + ']'].checked = true;
  }
  last = num;
}
function init() {
  for (var i = 0; i < NUM_BOXES; i++)
    document.forms.boxes['box[' + i + ']'].onclick = check;
}

HTML:

<body onload="init()">
  <form name="boxes">
    <input name="box[0]" type="checkbox">
    <input name="box[1]" type="checkbox">
    <input name="box[2]" type="checkbox">
    <input name="box[3]" type="checkbox">
    <input name="box[4]" type="checkbox">
    <input name="box[5]" type="checkbox">
    <input name="box[6]" type="checkbox">
    <input name="box[7]" type="checkbox">
    <input name="box[8]" type="checkbox">
    <input name="box[9]" type="checkbox">
  </form>
</body>

— santosh
source

15

Hey! Mon pote, qu'est-ce que tu fais ici?

— omg

Cela ressemble à une sélection de plage (c'est-à-dire, cochez le premier élément, maintenez la touche Maj enfoncée, cochez le dernier; et tous ceux entre les deux sont cochés.) Cependant, c'est bien plus que ce que demande la question. Il manque cependant du code, comme checkUncheckAll ().

— joelsand