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

629

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?

AnonyMouse
la source
est-il nécessaire de poser à nouveau cette question, où une question très votée existe dans stackoverflow .... stackoverflow.com/questions/901712/…
Ariful Islam
28
@Arif Je ne pense pas qu'il s'agisse de doublons, car la question liée concerne l'obtention de l'état d'une case à cocher, tandis que celle-ci concerne un événement vérifié.
Rachel
1
Je dois toujours rechercher cette propriété vérifiée, il existe de nombreuses façons d'y parvenir, comme
indiqué

Réponses:

1230

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']")
James Allardice
la source
1
En fait, je l'ai à la recherche de la case à cocher par la classe. Existe-t-il un meilleur moyen d'obtenir simplement toutes les cases à cocher quelle que soit la classe?
AnonyMouse
4
@AnonyMouse - Voir ma modification. Il y a plusieurs façons de procéder.
James Allardice
18
@Vigrond - En fait, cliquer sur une étiquette déclenche l'événement click sur le contrôle associé: jsfiddle.net/ZFG84
James Allardice
4
C'est beaucoup plus propre que $(this).is(':checked'). Je pensais que vous deviez utiliser l' changeévénement si vous voulez détecter les changements du clavier (tabulation, espace de frappe), mais étonnamment, clickdétecte également les changements qui ne proviennent pas d'un clic de souris, je ne sais pas si c'est une chose jQuery, jsfiddle.net / mendesjuan / E39sz
Juan Mendes
41
Veuillez noter: Lier tout événement click,change ou que ce soit à toutes les cases sur la page peut provoquer des problèmes de performance (depepending sur le montant des cases à cocher). Essayez de lier à l'élément parent ou au document et de capturer l'événement bouillonné, c'est$('form').on('change', ':checkbox', function(){ //stuff });
hitautodestruct
109

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>

applecrusher
la source
23

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
    }
})
Siddhartha Chowdhury
la source
4
Bien que ce code puisse répondre à la question, fournir un contexte supplémentaire concernant pourquoi et / ou comment ce code répond à la question améliore sa valeur à long terme.
JAL
12

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.

Matas Vaitkevicius
la source
Que faire si vous souhaitez rechercher uniquement des cases à cocher non cochées? J'ai ceci pour tous vérifié $ ("# tableUSNW tbody tr td [id = td1]: case à cocher: vérifié"); mais je ne sais pas comment trouver tout non vérifié.
FrenkyB
1
@FrenkyB essayez de suivre:$("input[type='checkbox']:not(:checked)")
Matas Vaitkevicius
5
$(document).ready(function () {
    $(document).on('change', 'input[Id="chkproperty"]', function (e) {
        alert($(this).val());
    });
});
Burhan Kaya
la source
3

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();
}
Hasib Kamal
la source
sur l'événement 'click' ne fonctionne pas dans ce cas. sur les travaux de «changement».
Mehmood Memon
2

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" />`
caras
la source
2

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//
                    }
                });
Shan
la source
1

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>

Nɪsʜᴀɴᴛʜ ॐ
la source
1

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!

Radames E. Hernandez
la source