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

28 juin 2013 par dans Developpement web, jquery, Net

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

$(document).ready(function(){
 // mon code jquery ici
});

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.

<input id="checkAll" type="checkbox" />Cocher/ décocher
<ul id='magazine'>
   <li><input type="checkbox" />Mag 1</li>
   <li><input type="checkbox" />Mag 2</li>
   <li><input type="checkbox" />Mag 3</li>
   <li><input type="checkbox" />Mag 4</li>
</ul>

 

$('#checkAll').click(function() {
 
// on cherche les checkbox à l'intérieur de l'id  'magazine'
var magazines = $("#magazine").find(':checkbox'); 
   if(this.checked){ // si 'checkAll' est coché
      magazines.prop('checked', true); 
   }else{ // si on décoche 'checkAll'
      magazines.prop('checked', false);
   }          
});

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

 
<div id="affichagePochette">
   <div id="filtrePochette">
      <ul>
         <li>
            <fieldset>
               <input id="coincidence" value="coincidence"  class="parentCheckBox" type="checkbox" name="cbcoincidence[]" data-taxonomy="txcoincidence" > 
               <label for="coincidence">Coincidence ou pas</label>
               <ul>
                  <li>
                     <input id="pochetteIdemA" value="pochetteIdemA" type="checkbox" name="cbcoincidence[]"  class="childCheckBox"  data-taxonomy="txpochetteIdemA" >
                     <label for="pochetteIdemA">Pochette identique A</label>
                  </li>
                  <li>
                     <input id="pochetteIdemB" value="pochetteIdemB" type="checkbox" name="cbcoincidence[]"  class="childCheckBox" data-taxonomy="txpochetteIdemB"  >
                     <label for="pochetteIdemB">Pochette identique B</label>
                  </li>
                  <li>
                     <input id="pochetteIdemC" value="pochetteIdemC" type="checkbox" name="cbcoincidence[]"  class="childCheckBox"  data-taxonomy="txpochetteIdemC" >
                     <label for="pochetteIdemC">Pochette identique C</label>
                  </li>
               </ul>
            </fieldset>
      </li>
      <li>
         <fieldset>
            <input value="autresPochettes" class="parentCheckBox" type="checkbox" name="cbautresPochettes[]" data-taxonomy="txautresPochettes" > 
            <label for="autresPochettes">D'autres pochettes</label>
            <ul>
               <li>
                  <input id="auHasard" value="auHasard" type="checkbox" name="cbautresPochettes[]" class="childCheckBox"  data-taxonomy="txAuhasard" >
                  <label for="auHasard">Au hasard</label>
               </li>
               <li>
                  <input id="quiBouge" value="quiBouge" type="checkbox" name="cbautresPochettes[]"  class="childCheckBox" data-taxonomy="txQuiBouge" >
                  <label for="quiBouge">Qui bouge</label>
               </li>
            </ul>
         </fieldset>
      </li>
   </ul>
   </div>
 
   <div id="listePochette">
      <ul>
         <li class="pochette txAuhasard">
            <img src="images/au-hasard-1.jpg" alt="Pochette Album" title="Pochette Album" width="300" height="300"/>
         </li>
         <li class="pochette txQuiBouge">
            <img src="images/Pochette-album-animee-1.gif" alt="Pochette Album" title="Pochette Album" width="500" height="500"/>
         </li>					
         <li class="pochette txAuhasard">
            <img src="images/au-hasard-2.jpg" alt="Pochette Album" title="Pochette Album" width="300" height="300"/>
         </li>
         <li class="pochette txpochetteIdemA">
            <img src="images/pochette-idem-1.jpg" alt="Pochette Album" title="Pochette Album" width="300" height="300"/>
         </li>
 
         etc....								
 
         </ul>
   </div>	    
</div><!-- #affichagepochette -->

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

 
jQuery(document).ready(function($)
{
// function qui affiche les Pochettes
   affichageDesPochettesCoche = function () { 
   // on cache d'abord tout
   $('#listePochette .pochette').fadeOut();	
      // on se crée un array des checkbox cochées dont on récupère la valeur de data-taxonomy	
      var pochetteAffiche = $('#filtrePochette :checkbox:checked.active').map(function () {return $(this).attr("data-taxonomy");}).get();
      // on boucle pour afficher seulement ceux présents dans le tableau
      $.each(pochetteAffiche, function(index,valeur) {	$('#listePochette .'+valeur+'').fadeIn();});	
      //alert(pochetteAffiche); // ça c'est pour tester
   } 
 
// on vérifie combien de cases sont cochées
var nbChecked = $("#filtrePochette").find("input[type=checkbox]:checked").length; 
 
   if( nbChecked == 0 ){ // si aucune case de cochée
      // bah on coche toutes les cases à cocher  
      var cocheToutAuLoad = $('#filtrePochette').find(':checkbox').prop('checked', true).addClass('active');
      // puis on affiche tout
      cocheToutAuLoad.promise().done( affichageDesPochettesCoche());
   } else { // sinon afficher celles qui sont cochées
      // on ajoute la classe "active" ici pour styliser avec les css
      $("#filtrePochette").find("input[type=checkbox]:checked").addClass("active");  
      // on relance la fonction pour vérifier si tout est bien affiché comme il faut
      affichageDesPochettesCoche();
   } 	
 
   //en cliquant sur la checkbox parent on coche ou décoche toutes ses chechkbox enfants
   $(".parentCheckBox").click(
      function() {
         /* on check toutes les cases enfants en se servant des fieldset 
            comme conteneur pour se repérer et de la classe childCheckBox 
            pour savoir lesquels cocher ou décocher*/
 
         $(this).parents('fieldset:eq(0)').find('.childCheckBox').prop('checked', this.checked);
         affichageDesPochettesCoche();
         });
 
   // en cochant une case enfant on coche ou décoche la parentCheckbox
   $('.childCheckBox').click(
      function() {
      // si la case parent est cochée mais que celle que nous venons de cocher ne l'est pas (plus) : on décoche la case parent
      if ( ($(this).parents('fieldset:eq(0)').find('.parentCheckBox').is(':checked') == true)  && ($(this).is(':checked') == false) )
         {$(this).parents('fieldset:eq(0)').find('.parentCheckBox').prop('checked', false);}
      // l'attribut checked est true si on vient de cliquer sur une case à cocher enfant
      if (this.checked == true) 
	{// on définit notre valeur à true
         var val = true;
         // on boucle pour vérifier si une case à cocher n'est pas décochée : checked renvoie false
         $(this).parents('fieldset:eq(0)').find('.childCheckBox').each(
         function() 
         { // si renvoie false on attribue notre nouvelle valeur à false
         if (this.checked == false)
         val = false;
         });
         // on assigne au checkbox parent la bonne valeur : true si toutes sont cochées, false si au moins une checkbox est décochée
         $(this).parents('fieldset:eq(0)').find('.parentCheckBox').prop('checked', val);
         }	
         affichageDesPochettesCoche();
         });
 
   // enfin on peut aussi ajouter une classe hover pour permettre des effets au rollover via css
   $("#listePochette li").hover(function(){
      $(this).addClass('hover');
   }, function() {
      $(this).removeClass('hover');
   });
});

L’exemple en ligne

Commentaires (2)

 

  1. hamidou dit :

    comment recuperer la valeure d’un champ de datable avec jquery

  2. Kouassi dit :

    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