Jquery et les checkbox, tout cocher et tout décocher d’un coup

Si comme moi vous avez besoin de cocher une checkbox qui coche ou décoche des cases enfants à cocher, voici quelques codes qui pourraient vous intéresser.

L’exemple en ligne

Cas 1 : cocher et décocher, version avec ID

Ici nous avons un input de type checkbox dont l’identifiant est « checkAll » qui va déclencher l’action de tout cocher ou de tout décocher.

En clair, au clic on vérifie si les input dans le div #magazine sont cochés ou non et on les coche/décoche.

 

Cas 2 : cocher et décocher, version avec fieldset

pochette-jquery

L’intérêt ici est de décocher le parent si l’un de ses enfants au moins est décoché.

Nous nous servirons des fieldsets afin de pouvoir regrouper les chechbox dans un même conteneur : ils appartiendront à un même groupe et comme cela nous pourrons avoir plusieurs groupes différents dans une même page.
Nous utiliserons les classes pour différencier les inputs enfant des parents.

Pour l’exemple, j’ai pris de superbes pochettes d’album avec un certain intérêt. Je les ai séparées en 2 groupes dans lesquels j’ai encore ajouté une distinction, le tout englobé dans un fieldset.

Afin de pouvoir identifier le type des albums, on ajoutera aux input un attribut dont le choix du nom est totalement arbitraire : data-taxonomy. Il nous permettra de savoir dans quelle catégorie est « rangé » l’album.

Nous avons donc pour les inputs :

+ fieldset
+ + checkbox parent
+ + + checkbox enfant
+ + + checkbox enfant
+ + + checkbox enfant

+ fieldset
+ + checkbox parent
+ + + checkbox enfant
+ + + checkbox enfant

Nous avons donc pour les albums présentés :

+ ul
+ + li img src= »fichier.jpg » /li
+ + li img src= »fichier.jpg » /li
+ + li img src= »fichier.jpg » /li
+ + li img src= »fichier.jpg » /li
+ + li img src= »fichier.jpg » /li

+ /ul

Le tout mis en ordre grâce au css

L’exemple en ligne

La partie html de notre exemple ressemblera à cela

Une fois que votre html est prêt n’oubliez pas d’inclure jquery puis vous pourrez inclure votre fichier fonction.js qui contiendra :

L’exemple en ligne

2 réponses sur “Jquery et les checkbox, tout cocher et tout décocher d’un coup”

  1. Bonjour, svp je voudrais sélectionner la musique à écouter en cliquant sur l’icone play de(icon-control-play text), mais devra jouer dans mon lecteur. Merci

Laisser un commentaire

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