Utiliser les checkbox modifiées par uniform.js

Case à cochée "uniform"Uniform.js est un composant permettant d’améliorer le design des checkbox, des bouton radios, des listes déroulantes etc…
Sur leur site vous trouverez aisément comment créer des checkbox « uniformisée » …
Le seul truc qu’on oublier les créateurs de ce plugin jquery, c’est d’expliquer utiliser comment les objets ainsi modifié … car on créer rarement une case à cocher pour décorer sa page…

Or, le fonctionnement des checkbox « uniformisée » est différents des checkbox classique.

uniform.js entoure le checkbox d’un span dans lequel il place une classe « checked » quand l’élément est cochée. La case elle même ne comporte pas d’indication d’état.

Donc on récupère l’état ainsi:

var etat=$("#macaseacocher").parent().hasClass("checked");

Le principal défaut de ce composant c’est le délais entre le click et l’actualisation de son état. Selon les navigateurs, il est courant que l’événement .change arrive avant que la classe ai été ajoutée… => la lecture de valeur est donc faussée:

// code non fiable => résultat 
$("#macaseacocher").change(function(){
 var etat= $("this").parent().hasClass("checked");
 alert(etat);
});

La solution est alors d’intégrer l’appel de la fonction de mise à jour et de ne faire le test qu’après l’exécution de celle ci :

$("#macaseacocher").change(function(){
   // force l'update de uniform avant le test pour fiabiliser le résultat.
   $.uniform.update($(this));
   var etat= $("this").parent().hasClass("checked");
   alert(etat);
});

Ci dessous quelques routines que j’ai extrait d’un script ou je me sert des cases a cochées « uniformisée » pour sélectionner des éléments dans un tableau. En bas de ce tableau, une case a cocher nommée checktout permettait de cocher toute les autres.

Autre exemples de codes:

// compter le nombre de cases cochées (pour un tableau par exemple)
function CompteCasesCochees(){
 //sélecteur des enregistrements cochés sauf "checktout":
 var CasesCochees=$(":checkbox:not('#checktout')").parent(".checked").children();
 return CasesCochees.length;
}
// Recuperer les valeurs des cases cochées d'un tableau
// Ce tableau comportant en derniere ligne une case nommée cochertout permettant de tout (de)selectionner
function getValeursCasesCochees(){
 //selecteur des enregistrements cochés sauf "cochertout":
 var CasesCochees=$(":checkbox:not('#cochertout')").parent(".checked").children();
 var valeurs = [];
 CasesCochees.each(function() {
   valeurs.push($(this).val());
 });
 return valeurs;
}

Additif du 12 septembre:
Pour la lecture et le comptage des cases, la vérification de la classe « checked » sur l’élément le span parent suffit.
En revanche, pour cocher ou décocher par programmation une ou plusieurs cases, il faut réaliser l’action d’une case classique (à savoir ajouter l’attribut « checked » true sur la case) ET ajouter la classe « checked » sur le span parent.

Exemple:

    $(":checkbox").change(function(){
 // force l'update du theme uniform avant le test pour être sur du résultat.

        $.uniform.update($(this));
        if ($(this).attr("id")=="cochetout")
        //l'utilisateur a cliqué sur "tous (de)cocher"
        {
            var indicateur=$(this).parent();
            var cases=$(":checkbox:not('#cochetout')");/
            if ( indicateur.hasClass("checked")){
                cases.attr("checked", true);
                cases.parent().addClass("checked");

            } else {
                cases.attr("checked", false);
                cases.parent().removeClass("checked");
            }
            // on renvoi une mise à jour car on a changé l'état des cases.
            $.uniform.update($(this));
        }
        affichenbcasescochees();
    });

function affichenbcasescochees(){
//selecteur des enregistrements cochés sauf "cochetout":
var CasesCochees=$(":checkbox:not('#cochetout')").parent(".checked").children();
$("#nbselect").html("Nombre d'élements cochés:  "+ CasesCochees.length );
}

Laisser un commentaire