Checkbox : Tout cocher, Tout décocher ou Inverser la sélecti

Checkbox : Tout cocher, Tout décocher ou Inverser la sélecti

Messagede quentinmontana le Jeu 3 Juil 2008 22:41

Ce script permet d'ajouter à un jeu de cases à cocher (checkbox) les fonctionnalités "Tout cocher", "Tout décocher" ou "Inverser la sélection".
Il peut être utiliser indépendament plusieurs fois dans la même page, chaque jeu de checkbox étant dans un conteneur (<div>, <p> ou autre) différent.
Testé IE et Firefox.
Valide HTML 4.01 Transitional

Le code :


Entre <HEAD> et </HEAD> :

Code: Tout sélectionner
<script type="text/javascript">
<!--
// ==========================
// Script réalisé par Eric Marcus - Aout 2006
// ==========================

// conteneur = id du bloc (<div>, <p> ...) contenant les checkbox
// a_faire = '0' pour tout décocher
// a_faire = '1' pour tout cocher
// a_faire = '2' pour inverser la sélection

function GereChkbox(conteneur, a_faire) {
var blnEtat=null;
var Chckbox = document.getElementById(conteneur).firstChild;
   while (Chckbox!=null) {
      if (Chckbox.nodeName=="INPUT")
         if (Chckbox.getAttribute("type")=="checkbox") {
            blnEtat = (a_faire=='0') ? false : (a_faire=='1') ? true : (document.getElementById(Chckbox.getAttribute("id")).checked) ? false : true;
            document.getElementById(Chckbox.getAttribute("id")).checked=blnEtat;
         }
      Chckbox = Chckbox.nextSibling;
   }
}
//-->
</script>


Entre <BODY> et </BODY> :

Code: Tout sélectionner
<form>
<input type="button" value="Tout cocher" onClick="GereChkbox('div_chck','1');">&nbsp;&nbsp;&nbsp;
<input type="button" value="Tout décocher" onClick="GereChkbox('div_chck','0');">&nbsp;&nbsp;&nbsp;
<input type="button" value="Inverser la sélection" onClick="GereChkbox('div_chck','2');">
<br /><br />
   <div id="div_chck">
   <input type="checkbox" name="checkbox1" id="checkbox1" value="1"><label for="checkbox1">Choix 1</label><br />
   <input type="checkbox" name="checkbox2" id="checkbox2" value="2"><label for="checkbox2">Choix 2</label><br />
   <input type="checkbox" name="checkbox3" id="checkbox3" value="3"><label for="checkbox3">Choix 3</label><br />
   <input type="checkbox" name="checkbox4" id="checkbox4" value="4"><label for="checkbox4">Choix 4</label><br />
   <input type="checkbox" name="checkbox5" id="checkbox5" value="5"><label for="checkbox5">Choix 5</label>
   </div>
</form>
quentinmontana
 
Messages: 32
Inscription: Mar 17 Juin 2008 16:16


Retourner vers Languages du web

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités