Événement de changement d'état d'une case à cocher jQuery

Question

Je veux qu'un événement soit déclenché côté client lorsqu'une case à cocher est cochée ou décochée :

$('.checkbox').click(function() {
  if ($(this).is(':checked')) {
    // Do stuff
  }
});

En fait, je veux que cela se produise pour chaque case à cocher de la page. Cette méthode de déclenchement au clic et de vérification de l'état est-elle acceptable ?

Je pense qu'il doit y avoir un moyen plus propre avec JQuery. Quelqu'un connaît-il une solution ?

Answer 1

Lier à la change au lieu de click . Cependant, vous aurez probablement encore besoin de vérifier si la case est cochée ou non :

$(".checkbox").change(function() {
    if(this.checked) {
        //Do stuff
    }
});

Le principal avantage de la liaison avec le change sur l'événement click est que tous les clics sur une case à cocher n'entraînent pas un changement d'état. Si vous souhaitez uniquement capturer les événements qui entraînent le changement d'état de la case à cocher, il vous faut le bien nommé change événement. Expurgée dans les commentaires

Notez également que j'ai utilisé this.checked au lieu d'envelopper l'élément dans un objet jQuery et d'utiliser les méthodes jQuery, simplement parce qu'il est plus court et plus rapide d'accéder directement à la propriété de l'élément DOM.

Modifier (voir les commentaires)

Pour obtenir toutes les cases à cocher, vous avez plusieurs possibilités. Vous pouvez utiliser la fonction :checkbox pseudo-sélecteur :

$(":checkbox")

Ou vous pouvez utiliser un l'attribut est égal à sélecteur :

$("input[type='checkbox']")

Answer 2

À l'avenir, si vous rencontrez des difficultés, sachez que si vous ajoutez les cases à cocher de manière dynamique, la bonne méthode est la suivante réponse acceptée ci-dessus ne fonctionnera pas. Vous devrez tirer parti de délégation d'événements qui permet à un nœud parent de capturer les événements à bulles d'un descendant spécifique et d'émettre un rappel.

// $(<parent>).on('<event>', '<child>', callback);
$(document).on('change', '.checkbox', function() {
    if(this.checked) {
      // checkbox is checked
    }
});

Notez qu'il est presque toujours inutile d'utiliser document pour le sélecteur parent. Choisissez plutôt un nœud parent plus spécifique pour éviter de propager l'événement à trop de niveaux.

L'exemple ci-dessous montre comment les événements des nœuds de dom ajoutés dynamiquement ne déclenchent pas les listeners définis précédemment.

$postList = $('#post-list');

$postList.find('h1').on('click', onH1Clicked);

function onH1Clicked() {
  alert($(this).text());
}

// simulate added content
var title = 2;

function generateRandomArticle(title) {
  $postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}

setTimeout(generateRandomArticle.bind(null, ++title), 1000);
setTimeout(generateRandomArticle.bind(null, ++title), 5000);
setTimeout(generateRandomArticle.bind(null, ++title), 10000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
  <article class="post">
    <h1>Title 1</h1>
  </article>
  <article class="post">
    <h1>Title 2</h1>
  </article>
</section>

Alors que cet exemple montre l'utilisation de la délégation d'événements pour capturer des événements pour un nœud spécifique ( h1 dans ce cas), et émettre un rappel pour de tels événements.

$postList = $('#post-list');

$postList.on('click', 'h1', onH1Clicked);

function onH1Clicked() {
  alert($(this).text());
}

// simulate added content
var title = 2;

function generateRandomArticle(title) {
  $postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}

setTimeout(generateRandomArticle.bind(null, ++title), 1000); setTimeout(generateRandomArticle.bind(null, ++title), 5000); setTimeout(generateRandomArticle.bind(null, ++title), 10000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
  <article class="post">
    <h1>Title 1</h1>
  </article>
  <article class="post">
    <h1>Title 2</h1>
  </article>
</section>

Answer 3

Une autre solution

$('.checkbox_class').on('change', function(){ // on change of state
   if(this.checked) // if changed state is "CHECKED"
    {
        // do the magic here
    }
})

Answer 4

Si votre intention est d'attacher l'événement uniquement aux cases à cocher cochées (de sorte qu'il se déclenche lorsqu'elles sont décochées et cochées à nouveau plus tard), c'est ce que vous voulez.

$(function() {
    $("input[type='checkbox']:checked").change(function() {

    })
})

si votre intention est d'attacher un événement à toutes les cases à cocher (cochées et non cochées)

$(function() {
    $("input[type='checkbox']").change(function() {

    })
})

si vous voulez qu'il se déclenche uniquement lorsqu'ils sont cochés (à partir de non cochés), alors la réponse de @James Allardice ci-dessus.

BTW input[type='checkbox']:checked est un sélecteur CSS.

Answer 5

$(document).ready(function () {
    $(document).on('change', 'input[Id="chkproperty"]', function (e) {
        alert($(this).val());
    });
});