jQuery – Sélectionner les checkbox enfants

Aujourd’hui, un petit article sans prétention pour vous expliquer une méthode parmi tant d’autres pour sélectionner automatiquement les checkbox enfants d’un groupe de checkbox. Bon, je ne suis pas très clair là tout de suite, mais vu qu’on m’a déjà posé plusieurs fois la question au sujet de ce type d’effet recherché, je vais tâcher d’être le plus explicite possible.

En gros vous avez ce type de hiérarchie :

checkbox-jquery

vous voulez globalement, que dès qu’une checkbox est sélectionnée, toutes les checkbox enfants de cette dernière le soient aussi. Pour se faire, voici une méthode avec jQuery, simple à mettre en place et efficace. Pour commencer créons une petite structure de checkbox ainsi :

<form action="" method="post"><span class="span_dir parent_0"><input name="list_elements[]" type="checkbox" value="1" />Element 1</span>
<span class="span_dir parent_1"><input name="list_elements[]" type="checkbox" value="2" />Sous-élément 1</span>
<span class="span_dir parent_1 parent_2"><input name="list_elements[]" type="checkbox" value="4" />Sous-sous-élément 1</span>
<span class="span_dir parent_1 parent_2"><input name="list_elements[]" type="checkbox" value="5" />Sous-sous-élément 2</span>
<span class="span_dir parent_1"><input name="list_elements[]" type="checkbox" value="3" />Sous-élément 2</span>
<span class="span_dir parent_1 parent_3"><input name="list_elements[]" type="checkbox" value="6" />Sous-sous-élément 3</span>
<span class="span_dir parent_1 parent_3"><input name="list_elements[]" type="checkbox" value="7" />Sous-sous-élément 4</span>
<span class="span_dir parent_1 parent_3"><input name="list_elements[]" type="checkbox" value="8" />Sous-sous-élément 5</span>
<span class="span_dir parent_1 parent_3"><input name="list_elements[]" type="checkbox" value="9" />Sous-sous-élément 6</span>
<span class="span_dir parent_1"><input name="list_elements[]" type="checkbox" value="4" />Sous-élément 3</span>
<span class="span_dir parent_1 parent_4"><input name="list_elements[]" type="checkbox" value="10" />Sous-sous-élément 7</span>
<span class="span_dir parent_1 parent_4"><input name="list_elements[]" type="checkbox" value="11" />Sous-sous-élément 8</span>
<span class="span_dir parent_1 parent_4"><input name="list_elements[]" type="checkbox" value="12" />Sous-sous-élément 9</span>
<span class="span_dir parent_1 parent_4 parent_12"><input name="list_elements[]" type="checkbox" value="13" />Sous-sous-sous-élément 1</span>
<span class="span_dir parent_1 parent_4 parent_12"><input name="list_elements[]" type="checkbox" value="14" />Sous-sous-sous-élément 2</span>

<input name="send" type="submit" value="envoyer" />

</form>

 

Maintenant voyons le code jQuery qui permettra d’avoir l’effet escompté :

<script type="text/javascript">
<!-- $(document).ready(function(){ $(".span_dir input:checkbox").click(function(){ if($(this).is(":checked") ){ $(".parent_"+$(this).val()+" input:checkbox").attr("checked","checked"); } }); }); //--></script>

 

C’est tout ?
Bas oui, désolé de vous décevoir 🙂
Certes, il existe certainement d’autres méthodes, mais celle-ci, est celle qui me convenait le mieux étant donné que je ne pouvais savoir à l’avance le nombre d’enfants que je pouvais avoir en checkbox.

Analysons le code javascript :

1/ Nous regardons si il y a un clique sur une checkbox de classe css span_dir, si oui
2/ Nous vérifions si le clique a sélectionné (checké) la checkbox, si oui
3/ Toutes les checkbox avec comme classe css parent_X (X étant la valeur de la checkbox sélectionnée) seront aussi sélectionnées

Voilà pour la petite astuce,
Bon code à tous

EDIT DU 21.11.2010
Je vous propose une solution plus sympa si vous pouvez réaliser votre structure avec des éléments ul/li, qui nous est proposée par Pomeh.

Voici une structure html d’exemple :

<form action="traitement.php" method="post">
<ul id="myList">
 	<li><input name="list_elements[]" type="checkbox" value="1" /> Element 1
<ul>
 	<li><input name="list_elements[]" type="checkbox" value="2" /> Sous-élément 1
<ul>
 	<li><input name="list_elements[]" type="checkbox" value="4" /> Sous-sous-élément 1</li>
 	<li><input name="list_elements[]" type="checkbox" value="5" /> Sous-sous-élément 2</li>
</ul>
</li>
</ul>
<ul>
 	<li><input name="list_elements[]" type="checkbox" value="3" /> Sous-élément 2
<ul>
 	<li><input name="list_elements[]" type="checkbox" value="6" /> Sous-sous-élément 3</li>
 	<li><input name="list_elements[]" type="checkbox" value="7" /> Sous-sous-élément 4</li>
 	<li><input name="list_elements[]" type="checkbox" value="8" /> Sous-sous-élément 5</li>
 	<li><input name="list_elements[]" type="checkbox" value="9" /> Sous-sous-élément 6</li>
</ul>
</li>
</ul>
<ul>
 	<li><input name="list_elements[]" type="checkbox" value="4" /> Sous-élément 3
<ul>
 	<li><input name="list_elements[]" type="checkbox" value="10" /> Sous-sous-élément 7</li>
 	<li><input name="list_elements[]" type="checkbox" value="11" /> Sous-sous-élément 8</li>
 	<li><input name="list_elements[]" type="checkbox" value="12" /> Sous-sous-élément 9
<ul>
 	<li><input name="list_elements[]" type="checkbox" value="13" /> Sous-sous-sous-élément 1</li>
 	<li><input name="list_elements[]" type="checkbox" value="14" /> Sous-sous-sous-élément 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<input name="send" type="submit" value="envoyer" />

</form>

Puis le code jQuery :

jQuery(function($) {

var selectorTarget = 'input:checkbox';

$('#myList').delegate(selectorTarget, 'click', function(ev, data) {

var target = $(ev.target); // correspond à un élément input
if (target.attr('checked') == true) {
target.parent('li') // l'élement li contenant l'input
.siblings('ul') // tous les ul de même niveau que ce li
.find(selectorTarget) // chercher tous les input enfants
.attr('checked', true);
}

});

});

Ce qui vous permet ainsi d’adapter au mieux votre css et le code source de la page est plus lisible. Mais fonctionne essentiellement avec une structure ul/li.

Articles qui peuvent vous intéresser :

Author: Franck Pertegas

Share This Post On

2 Comments

  1. Ca ne serait pas plus simple en utilisant une liste ul/li ? Plus simple pour mettre en forme (via CSS), moins de classe CSS span_dir et parent_X et code javascript plus (+) réutilisable. Petit exemple: http://jsfiddle.net/75FJX/4/

    Post a Reply
  2. Salut Pomeh,

    En effet, c’est ta solution la plus efficace pour ce cas là.

    J’ai gardée cette structure, parce qu’en fait, les enfants n’étaient pas au même niveau sur les sites où j’en ai eu besoin. C’est vrai que l’exemple que je donne est plus adapté pour ton code. Mais je mettrais des images d’un des sites où j’ai eu besoin de faire des sélections d’éléments enfants disposés différemment, et dans ce cas ça ne fonctionne pas avec des ul/li.

    Ta méthode est l’idéal pour des structures ayant des parents dom, ce qu’il faut que je précise, c’est que ma méthode fonctionne pour des éléments parents de nature différente. Je mettrais un exemple pour que ce soit plus explicite.

    Encore merci pour ta contribution, c’est une excellente solution.

    A++

    Post a Reply

Trackbacks/Pingbacks

  1. Superfish – Plugin jQuery – Créez vos menus déroulants | LudiBlog - [...] jQuery – Sélectionner les checkbox enfants [...]
  2. TinyMCE – Un nouveau site officiel | LudiBlog - [...] jQuery – Sélectionner les checkbox enfants [...]
  3. GMAP3 – Plugin jQuery – L’API Google Map v.3 Integration à la sauce jQuery | LudiBlog - [...] jQuery – Sélectionner les checkbox enfants [...]
  4. PDW File Browser – De l’upload d’images intégré à votre TinyMCE | LudiBlog - [...] jQuery – Sélectionner les checkbox enfants [...]
  5. FullCalendar – Plugin jQuery – Créez vos propres agendas comme Google | LudiBlog - [...] jQuery – Sélectionner les checkbox enfants [...]

Submit a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *