jQuery case à cocher état vérifié événement changé

Je veux qu'un événement se déclenche côté client lorsqu'une case est cochée / décochée:

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

Fondamentalement, je veux que cela se produise pour chaque case à cocher de la page. Cette méthode de tir sur le clic et de vérification de l'état est-elle correcte?

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

Lier à l' changeévénement au lieu de click. Cependant, vous devrez probablement toujours vérifier si la case est cochée ou non:

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

Le principal avantage de la liaison à l' changeévénement par rapport à l' clickévénement est que tous les clics sur une case à cocher ne la feront pas changer d'état. Si vous souhaitez uniquement capturer les événements qui entraînent un changement d'état de la case à cocher, vous souhaitez que l' changeévénement porte bien son nom . Expurgé dans les commentaires

Notez également que j'ai utilisé this.checkedau lieu d'envelopper l'élément dans un objet jQuery et d'utiliser des 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 commentaires)

Pour obtenir toutes les cases à cocher, vous avez deux options. Vous pouvez utiliser le :checkboxpseudo-sélecteur:

$(":checkbox")

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

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

Pour toute référence future à toute personne éprouvant des difficultés, si vous ajoutez les cases à cocher de manière dynamique, la bonne réponse acceptée ci-dessus ne fonctionnera pas. Vous devrez tirer parti de la délégation d'événements qui permet à un nœud parent de capturer les événements bouillonnés 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 documentle sélecteur parent. Choisissez plutôt un nœud parent plus spécifique pour éviter de propager l'événement sur trop de niveaux.

L'exemple ci-dessous montre comment les événements des nœuds dom ajoutés dynamiquement ne déclenchent pas les écouteurs 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>

Bien que cet exemple affiche l'utilisation de la délégation d'événements pour capturer des événements pour un nœud spécifique ( h1dans ce cas) et émettre un rappel pour ces é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>

Juste une autre solution

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

Si votre intention est d'attacher un événement uniquement sur les cases à cocher cochées (il se déclencherait alors lorsqu'elles ne sont pas cochées et vérifié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 décochées)

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

    })
})

si vous voulez qu'il ne se déclenche que lorsqu'ils sont cochés (de non cochés), alors @James Allardice répondez ci-dessus.

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

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

Prise de mesures basée sur un événement (événement sur clic).

$('#my_checkbox').on('click',function(){
   $('#my_div').hide();
   if(this.checked){
     $('#my_div').show();
   }
});

Sans événement prenant une action basée sur l'état actuel.

$('#my_div').hide();
if($('#my_checkbox').is(':checked')){
  $('#my_div').show();
}

peut-être que cela peut être une alternative pour vous.

<input name="chkproperty" onchange="($(this).prop('checked') ? $(this).val(true) : $(this).val(false))" type="checkbox" value="true" />`

C'est la solution à trouver si la case est cochée ou non. Utilisez la fonction #prop () //

$("#c_checkbox").on('change', function () {
                    if ($(this).prop('checked')) {
                        // do stuff//
                    }
                });

Essayez cette validation jQuery

$(document).ready(function() {
  $('#myform').validate({ // initialize the plugin
    rules: {
      agree: {
        required: true
      }

    },
    submitHandler: function(form) {
      alert('valid form submitted');
      return false;
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>

<form id="myform" action="" method="post">
  <div class="buttons">
    <div class="pull-right">
      <input type="checkbox" name="agree" /><br/>
      <label>I have read and agree to the <a href="https://stackexchange.com/legal/terms-of-service">Terms of services</a> </label>
    </div>
  </div>
  <button type="submit">Agree</button>
</form>

Est très simple, voici comment j'utilise:

JQuery:

$(document).on('change', '[name="nameOfCheckboxes[]"]', function() {
    var checkbox = $(this), // Selected or current checkbox
        value = checkbox.val(); // Value of checkbox

    if (checkbox.is(':checked'))
    {
        console.log('checked');
    }else
    {
        console.log('not checked');
    }
});

Cordialement!