web-dev-qa-db-fra.com

JQuery lie l'événement de clic aux cases à cocher

Voici une vue de base de ce à quoi mon HTML ressemble:

<form>
  <div id="part1">
     // some html form elements including checkboxes
  </div>
  <div id="part2">
    // more html code with more checkboxes
  </div>
  <div id=part2">
     // data table with numerous checkboxes built dynamically
  </div
</form>

Ce que je dois faire, c'est lier l'événement .click() aux cases à cocher des parties 1, 2 et 3 séparément. J'ai essayé cette $('#part1:checkbox').click(...) mais cela n'a pas fonctionné. Si j'utilise $("form :checkbox").click(...), le même événement clic est lié à toutes les cases à cocher et non à un seul ensemble. Comment pourrais-je les séparer?

jquerybind
9
iJared

Tu y es presque. Vous avez juste besoin d'un espace pour séparer le sélecteur de descendant:

$('#part1 :checkbox').click(function(){
    // code goes here
});

Pour augmenter les performances, vous pouvez utiliser ceci:

$('#part1 input[type=checkbox]').click(function(){
    // code goes here
});
19
Joseph Silber

Ou vous donnez le même nom de classe pour toutes les cases à cocher et donnez également l'ID div correspondant pour la case à cocher, de sorte que vous puissiez utiliser le code suivant,

<input type="checkbox" class="checkall" id="part1">Part 1

et votre script va comme ça.

$('.checkall').click(function () {
if (this.checked == false) {
$("." + $(this).attr("id")).hide();
}
});
1
user3512003

J'ai eu un problème similaire, et cette page StackOverflow est la première réponse à laquelle je suis tombé par hasard, mais je n'en étais pas vraiment satisfaite. J'ai trouvé cet article https://www.kevinleary.net/jquery-checkbox-checked/ avec une meilleure solution.

$('input[name="subscribe"]').on('click', function(){
    if ( $(this).is(':checked') ) {
        $('input[name="email"]').show();
    } 
    else {
        $('input[name="email"]').hide();
    }
});
1
Craig London

Utilisez ceci:

$('#part1 input:checkbox').click(...)

http://api.jquery.com/checkbox-selector/

0
Arash N