web-dev-qa-db-fra.com

jQuery case à cocher cochée état événement modifié

Je souhaite qu'un événement déclenche le côté client lorsqu'une case à cocher est activée/désactivée:

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

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

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

javascriptjqueryevent-handling
541
AnonyMouse

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

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

Le principal avantage de la liaison à l'événement change par rapport à l'événement click est que tous les clics sur une case à cocher ne provoquent un changement d'état. Si vous souhaitez uniquement capturer les événements entraînant le changement d'état de la case à cocher, vous souhaitez que l'événement change porte bien son nom. _ {Rédigé dans les commentaires

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

Edit (voir les commentaires)

Pour obtenir toutes les cases à cocher, vous avez deux options. Vous pouvez utiliser le :checkbox pseudo-selector:

$(":checkbox")

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

$("input[type='checkbox']")
1083
James Allardice

Pour toute référence future aux personnes rencontrant des difficultés, si vous ajoutez les cases à cocher de manière dynamique, la réponse correcte ci-dessus ne fonctionnera pas. Vous devrez utiliser délégation des événements qui permet à un nœud parent de capturer les événements diffusés par 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 sur trop de niveaux.

L'exemple ci-dessous montre comment les événements des noeuds 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 (h1 dans 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>

91
applecrusher

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
    }
})
21
Siddhartha Chowdhury

Si votre intention est d'attacher un événement uniquement sur les cases à cocher cochées (afin qu'il se déclenche lorsqu'elles sont décochées et cochées ultérieurement), 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 que le feu ne se déclenche que lorsqu’ils sont en train d’être cochés (non cochés), alors @James Allardice répondez ci-dessus. 

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

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

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>

1
Nishanth ॐ

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

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

Action effectuée sur la base d'un événement (sur un événement clic).

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

Sans événement prenant des mesures en fonction de l'état actuel.

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

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//
                    }
                });
0
Shan