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
la 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
la 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
la 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
la source

13

Pour JQuery 1.7+, utilisez:

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

Daniel De León
la 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
la 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
la 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
la 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
la 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
la 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

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

Réponses: