web-dev-qa-db-fra.com

Saisir l'événement de modification coché d'une case à cocher

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

jqueryunchecked
120
omg
<input type="checkbox" id="something" />

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

Éditer: Cela ne se produira pas si la case à cocher change pour d'autres raisons qu'un clic, par exemple à l'aide du clavier. Pour éviter ce problème, écoutez change au lieu de click.

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

161
marcgg

Le clic affectera une étiquette si nous en avons une attachée à la case à cocher de saisie?

Je pense que c'est mieux d'utiliser la fonction .change ()

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

$("#something").change( function(){
  alert("state changed");
});
41
Dídac Rios

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

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

Pour JQuery 1.7+, utilisez:

$('input[type=checkbox]').on('change', function() {
  ...
});
12
Daniel De León

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 la case à cocher simple:

$('#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/

4
Arun Kumar

D'après mon expérience, j'ai dû tirer parti du currentTarget actuel de l'événement:

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

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

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

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");
   }
});

En outre, vous pouvez le vérifier sur jsfiddle

1
Deepak saini