Checkbox permettant de checker toutes les autres checkboxes

Commenter

Contenu du snippet

La checkbox principale sert a cocher toute la série de checkbox du tableau. Le nombre d'élément du tableau peut être variable.

Si on coche manuellement toutes les checkbox, la checkbox principale se coche... De même, si on décoche une des checkbox, la principale se décoche aussi (lire aussi l'astuce : Comment aligner les cases à cocher (checkboxes) et leur label quel que soit le navigateur ?).

Ce script me servait pour la suppresion de mails dans une boite de reception... Et je me suis inspiré du site de hotmail pour la faire ;-)

Source / Exemple : 


 <html> <head><title></title> <SCRIPT language="javascript" type="text/javascript"> ////////////////////////////////////////////////////////////////////////////////////// // function checkall() // cette fonction s'execute lorsqu'on clique sur la checkbox principale // elle passe en revue les checkbox et les coche si necessaire // la checkbox d'indice 0 est la checkbox principale // rem si ovus ajouter des element de formulaire, il faudra mofifier le script // car l'instruction : temp = document.main.elements.length; comptabilise // tous les elements et pas uniquement les checkbox... ////////////////////////////////////////////////////////////////////////////////////// function checkall() {    // compte tous les éléments du formulaire en numérotant chronologiquement    temp = document.main.elements.length;    if (document.main.elements[0].checked)    { // si la case est cochée    for (i=1; i < temp; i++)    { // on coche toutes les autres       document.main.elements[i].checked=1;    }    }    else    {       for (i=1; i < temp; i++)    { // on décoche tout       document.main.elements[i].checked=0;    }    } } ////////////////////////////////////////////////////////////////////////////////////// // function checkone() // cette fonction s'execute lorsqu'on coche ou décoche une checkbox qcq // elle fait le compte des checkbox cochée pour savoir s'il faut décocher  // ou cocher la checkbox principale... ////////////////////////////////////////////////////////////////////////////////////// function checkone() {    m=0; // initialisation du nombre de cases cochées    temp = document.main.elements.length;    for (i=1; i < temp; i++)    { // on commence à 1 pour ne pas prendre en compte la checkbox principale       if (document.main.elements[i].checked)    { // si la checkbox courante est cochée, on comptabilise       m++;    }    }    if (document.main.elements[0].checked)    { // si la checkbox principale est cochée, on la décoche       document.main.elements[0].checked=0;    }    else    { // dans le cas contraire, on vérifie que toutes les checkbox sont cochées       if (m == (temp-1)) document.main.elements[0].checked=1;    } } ////////////////////////////////////////////////////////////////////////////////////// // function verifselection() // cette fonction s'execute qd on clique sur le bouton supprimer // elle vérifie que l'on a bien selectionné un objet au moins... ////////////////////////////////////////////////////////////////////////////////////// function verifselection() {    n=0;    temp = document.main.elements.length;    for (i=1; i< temp;i++)    {       if (document.main.elements[i].checked)    {       n=n+1;    }    }    if (n != 0)    {       if (confirm("Êtes-vous sûr de vouloir supprimer ce(s) objet(s)?"))       {          document.main.submit();       }    }    else    {       alert("Veuillez sélectionner au moins un objet !");    } } </SCRIPT> </head> <body> <form name="main" method="post" action="pagesuivante.php"> <center>    <table width="95%" border="0" cellpadding="0" cellspacing="2">       <tr bgcolor="#F9D37F">         <td width="20"><input type="checkbox" name="check_all" onclick="checkall()"></td>         <td>Objets</td>       </tr>       <tr bgcolor="#4274A6">          <td width="20"><input type="checkbox" name="check[]" value="5" onclick="checkone()"></td>   <td>objet 3</td>       </tr>           <tr bgcolor="4E95DB">          <td width="20"><input type="checkbox" name="check[]" value="4" onclick="checkone()"></td>   <td>objet 2</td>       </tr>           <tr bgcolor="#4274A6">          <td width="20"><input type="checkbox" name="check[]" value="3" onclick="checkone()"></td>   <td>objet 3</td>      </tr>      <tr bgcolor="4E95DB">         <td width="20"><input type="checkbox" name="check[]" value="4" onclick="checkone()"></td>  <td>objet 4</td>      </tr>    </table> <a href="javascript:verifselection();">Supprimer</a><BR> <a href="javascript:top.close();">Fermer</a> </center> </form> </body> </html>

Conclusion :


Ce code peut ne pas bien fonctionner si il est affiché dans des browser assez vieux...

Il fonctionne aussi bien sur PC que sur MAC mais avec les dernieres versions de IE et Netscape... J'ai pas eu l'occasion de tout tester ;-)

N'hésitez pas a me faire part de vos conclusions...

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.