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 :
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 :
[pastacode lang= »markup » manual= »%3Cform%20action%3D%22%22%20method%3D%22post%22%3E%3Cspan%20class%3D%22span_dir%20parent_0%22%3E%3Cinput%20name%3D%22list_elements%5B%5D%22%20type%3D%22checkbox%22%20value%3D%221%22%20%2F%3EElement%201%3C%2Fspan%3E%0A%3Cspan%20class%3D%22span_dir%20parent_1%22%3E%3Cinput%20name%3D%22list_elements%5B%5D%22%20type%3D%22checkbox%22%20value%3D%222%22%20%2F%3ESous-%C3%A9l%C3%A9ment%201%3C%2Fspan%3E%0A%3Cspan%20class%3D%22span_dir%20parent_1%20parent_2%22%3E%3Cinput%20name%3D%22list_elements%5B%5D%22%20type%3D%22checkbox%22%20value%3D%224%22%20%2F%3ESous-sous-%C3%A9l%C3%A9ment%201%3C%2Fspan%3E%0A%3Cspan%20class%3D%22span_dir%20parent_1%20parent_2%22%3E%3Cinput%20name%3D%22list_elements%5B%5D%22%20type%3D%22checkbox%22%20value%3D%225%22%20%2F%3ESous-sous-%C3%A9l%C3%A9ment%202%3C%2Fspan%3E%0A%3Cspan%20class%3D%22span_dir%20parent_1%22%3E%3Cinput%20name%3D%22list_elements%5B%5D%22%20type%3D%22checkbox%22%20value%3D%223%22%20%2F%3ESous-%C3%A9l%C3%A9ment%202%3C%2Fspan%3E%0A%3Cspan%20class%3D%22span_dir%20parent_1%20parent_3%22%3E%3Cinput%20name%3D%22list_elements%5B%5D%22%20type%3D%22checkbox%22%20value%3D%226%22%20%2F%3ESous-sous-%C3%A9l%C3%A9ment%203%3C%2Fspan%3E%0A%3Cspan%20class%3D%22span_dir%20parent_1%20parent_3%22%3E%3Cinput%20name%3D%22list_elements%5B%5D%22%20type%3D%22checkbox%22%20value%3D%227%22%20%2F%3ESous-sous-%C3%A9l%C3%A9ment%204%3C%2Fspan%3E%0A%3Cspan%20class%3D%22span_dir%20parent_1%20parent_3%22%3E%3Cinput%20name%3D%22list_elements%5B%5D%22%20type%3D%22checkbox%22%20value%3D%228%22%20%2F%3ESous-sous-%C3%A9l%C3%A9ment%205%3C%2Fspan%3E%0A%3Cspan%20class%3D%22span_dir%20parent_1%20parent_3%22%3E%3Cinput%20name%3D%22list_elements%5B%5D%22%20type%3D%22checkbox%22%20value%3D%229%22%20%2F%3ESous-sous-%C3%A9l%C3%A9ment%206%3C%2Fspan%3E%0A%3Cspan%20class%3D%22span_dir%20parent_1%22%3E%3Cinput%20name%3D%22list_elements%5B%5D%22%20type%3D%22checkbox%22%20value%3D%224%22%20%2F%3ESous-%C3%A9l%C3%A9ment%203%3C%2Fspan%3E%0A%3Cspan%20class%3D%22span_dir%20parent_1%20parent_4%22%3E%3Cinput%20name%3D%22list_elements%5B%5D%22%20type%3D%22checkbox%22%20value%3D%2210%22%20%2F%3ESous-sous-%C3%A9l%C3%A9ment%207%3C%2Fspan%3E%0A%3Cspan%20class%3D%22span_dir%20parent_1%20parent_4%22%3E%3Cinput%20name%3D%22list_elements%5B%5D%22%20type%3D%22checkbox%22%20value%3D%2211%22%20%2F%3ESous-sous-%C3%A9l%C3%A9ment%208%3C%2Fspan%3E%0A%3Cspan%20class%3D%22span_dir%20parent_1%20parent_4%22%3E%3Cinput%20name%3D%22list_elements%5B%5D%22%20type%3D%22checkbox%22%20value%3D%2212%22%20%2F%3ESous-sous-%C3%A9l%C3%A9ment%209%3C%2Fspan%3E%0A%3Cspan%20class%3D%22span_dir%20parent_1%20parent_4%20parent_12%22%3E%3Cinput%20name%3D%22list_elements%5B%5D%22%20type%3D%22checkbox%22%20value%3D%2213%22%20%2F%3ESous-sous-sous-%C3%A9l%C3%A9ment%201%3C%2Fspan%3E%0A%3Cspan%20class%3D%22span_dir%20parent_1%20parent_4%20parent_12%22%3E%3Cinput%20name%3D%22list_elements%5B%5D%22%20type%3D%22checkbox%22%20value%3D%2214%22%20%2F%3ESous-sous-sous-%C3%A9l%C3%A9ment%202%3C%2Fspan%3E%0A%0A%3Cinput%20name%3D%22send%22%20type%3D%22submit%22%20value%3D%22envoyer%22%20%2F%3E%0A%0A%3C%2Fform%3E » message= » » highlight= » » provider= »manual »/]
Maintenant voyons le code jQuery qui permettra d’avoir l’effet escompté :
[pastacode lang= »javascript » manual= »%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%3C!–%20%24(document).ready(function()%7B%20%24(%22.span_dir%20input%3Acheckbox%22).click(function()%7B%20if(%24(this).is(%22%3Achecked%22)%20)%7B%20%24(%22.parent_%22%2B%24(this).val()%2B%22%20input%3Acheckbox%22).attr(%22checked%22%2C%22checked%22)%3B%20%7D%20%7D)%3B%20%7D)%3B%20%2F%2F–%3E%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]
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 :
[pastacode lang= »markup » manual= »%3Cform%20action%3D%22traitement.php%22%20method%3D%22post%22%3E%0A%3Cul%20id%3D%22myList%22%3E%0A%20%09%3Cli%3E%3Cinput%20name%3D%22list_elements%5B%5D%22%20type%3D%22checkbox%22%20value%3D%221%22%20%2F%3E%20Element%201%0A%3Cul%3E%0A%20%09%3Cli%3E%3Cinput%20name%3D%22list_elements%5B%5D%22%20type%3D%22checkbox%22%20value%3D%222%22%20%2F%3E%20Sous-%C3%A9l%C3%A9ment%201%0A%3Cul%3E%0A%20%09%3Cli%3E%3Cinput%20name%3D%22list_elements%5B%5D%22%20type%3D%22checkbox%22%20value%3D%224%22%20%2F%3E%20Sous-sous-%C3%A9l%C3%A9ment%201%3C%2Fli%3E%0A%20%09%3Cli%3E%3Cinput%20name%3D%22list_elements%5B%5D%22%20type%3D%22checkbox%22%20value%3D%225%22%20%2F%3E%20Sous-sous-%C3%A9l%C3%A9ment%202%3C%2Fli%3E%0A%3C%2Ful%3E%0A%3C%2Fli%3E%0A%3C%2Ful%3E%0A%3Cul%3E%0A%20%09%3Cli%3E%3Cinput%20name%3D%22list_elements%5B%5D%22%20type%3D%22checkbox%22%20value%3D%223%22%20%2F%3E%20Sous-%C3%A9l%C3%A9ment%202%0A%3Cul%3E%0A%20%09%3Cli%3E%3Cinput%20name%3D%22list_elements%5B%5D%22%20type%3D%22checkbox%22%20value%3D%226%22%20%2F%3E%20Sous-sous-%C3%A9l%C3%A9ment%203%3C%2Fli%3E%0A%20%09%3Cli%3E%3Cinput%20name%3D%22list_elements%5B%5D%22%20type%3D%22checkbox%22%20value%3D%227%22%20%2F%3E%20Sous-sous-%C3%A9l%C3%A9ment%204%3C%2Fli%3E%0A%20%09%3Cli%3E%3Cinput%20name%3D%22list_elements%5B%5D%22%20type%3D%22checkbox%22%20value%3D%228%22%20%2F%3E%20Sous-sous-%C3%A9l%C3%A9ment%205%3C%2Fli%3E%0A%20%09%3Cli%3E%3Cinput%20name%3D%22list_elements%5B%5D%22%20type%3D%22checkbox%22%20value%3D%229%22%20%2F%3E%20Sous-sous-%C3%A9l%C3%A9ment%206%3C%2Fli%3E%0A%3C%2Ful%3E%0A%3C%2Fli%3E%0A%3C%2Ful%3E%0A%3Cul%3E%0A%20%09%3Cli%3E%3Cinput%20name%3D%22list_elements%5B%5D%22%20type%3D%22checkbox%22%20value%3D%224%22%20%2F%3E%20Sous-%C3%A9l%C3%A9ment%203%0A%3Cul%3E%0A%20%09%3Cli%3E%3Cinput%20name%3D%22list_elements%5B%5D%22%20type%3D%22checkbox%22%20value%3D%2210%22%20%2F%3E%20Sous-sous-%C3%A9l%C3%A9ment%207%3C%2Fli%3E%0A%20%09%3Cli%3E%3Cinput%20name%3D%22list_elements%5B%5D%22%20type%3D%22checkbox%22%20value%3D%2211%22%20%2F%3E%20Sous-sous-%C3%A9l%C3%A9ment%208%3C%2Fli%3E%0A%20%09%3Cli%3E%3Cinput%20name%3D%22list_elements%5B%5D%22%20type%3D%22checkbox%22%20value%3D%2212%22%20%2F%3E%20Sous-sous-%C3%A9l%C3%A9ment%209%0A%3Cul%3E%0A%20%09%3Cli%3E%3Cinput%20name%3D%22list_elements%5B%5D%22%20type%3D%22checkbox%22%20value%3D%2213%22%20%2F%3E%20Sous-sous-sous-%C3%A9l%C3%A9ment%201%3C%2Fli%3E%0A%20%09%3Cli%3E%3Cinput%20name%3D%22list_elements%5B%5D%22%20type%3D%22checkbox%22%20value%3D%2214%22%20%2F%3E%20Sous-sous-sous-%C3%A9l%C3%A9ment%202%3C%2Fli%3E%0A%3C%2Ful%3E%0A%3C%2Fli%3E%0A%3C%2Ful%3E%0A%3C%2Fli%3E%0A%3C%2Ful%3E%0A%3C%2Fli%3E%0A%3C%2Ful%3E%0A%3Cinput%20name%3D%22send%22%20type%3D%22submit%22%20value%3D%22envoyer%22%20%2F%3E%0A%0A%3C%2Fform%3E » message= » » highlight= » » provider= »manual »/]
Puis le code jQuery :
[pastacode lang= »javascript » manual= »jQuery(function(%24)%20%7B%0A%0Avar%20selectorTarget%20%3D%20’input%3Acheckbox’%3B%0A%0A%24(‘%23myList’).delegate(selectorTarget%2C%20’click’%2C%20function(ev%2C%20data)%20%7B%0A%0Avar%20target%20%3D%20%24(ev.target)%3B%20%2F%2F%20correspond%20%C3%A0%20un%20%C3%A9l%C3%A9ment%20input%0Aif%20(target.attr(‘checked’)%20%3D%3D%20true)%20%7B%0Atarget.parent(‘li’)%20%2F%2F%20l’%C3%A9lement%20li%20contenant%20l’input%0A.siblings(‘ul’)%20%2F%2F%20tous%20les%20ul%20de%20m%C3%AAme%20niveau%20que%20ce%20li%0A.find(selectorTarget)%20%2F%2F%20chercher%20tous%20les%20input%20enfants%0A.attr(‘checked’%2C%20true)%3B%0A%7D%0A%0A%7D)%3B%0A%0A%7D)%3B » message= » » highlight= » » provider= »manual »/]
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 :
21 novembre 2010
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/
21 novembre 2010
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++