Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

CHECKBOX PERMETTANT DE CHECKER TOUTES LES AUTRES CHECKBOXES


Information sur la source

Catégorie :Formulaire Niveau : Débutant Date de création : 29/12/2002 Date de mise à jour : 29/11/2004 11:01:37 Vu : 14 897

Note :
9,5 / 10 - par 4 personnes
9,50 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (10)
Ajouter un commentaire et/ou une note

Description

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.

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

  • <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>
<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...
 

Historique

29 novembre 2004 11:01:41 :
Voilà j'ai ajouté qq commentaires...

Commentaires et avis

signaler à un administrateur
Commentaire de angelo55 le 31/03/2003 16:26:54

Ce code serait bien avec un petit peu de commentaire...

signaler à un administrateur
Commentaire de DraGuLa le 02/04/2003 15:58:39

oui, c'est certain, je vais essayer de trouver le temps pour en ajouter :)

signaler à un administrateur
Commentaire de aquewel le 29/11/2004 00:09:30

commentfait-on pour traiter plusieur groupe de checkbox ???????? tu en parle mais tu ne dis rien de plus et ca m'interesse !!!! ;-)

merci ;-x

signaler à un administrateur
Commentaire de aquewel le 02/03/2005 00:34:41

comment utiliser le scriptavec dotre champs de formulaire je pige vraimenet pas !!

axel

signaler à un administrateur
Commentaire de tackanigashi le 17/02/2006 21:00:31

J'ai réussi a adapter ce script à mes besoins. C'est exactement ce que je recherchait et ça marche impec'.
Merci

signaler à un administrateur
Commentaire de guiglette le 22/02/2006 11:04:10

Hello,

comme le demande Aquewel, comment faire pour appliquer le script uniquement à une partie de tableau et non pas à tout le formulaire ?

Faut-il changer l'accès (document.main.elements, etc) dans le script ?

Merci !

signaler à un administrateur
Commentaire de DraGuLa le 22/02/2006 14:05:07

Réponse à Guiglette et Aquewel :

Le seul moyen que j'ai trouvé est de faire des boucles 'For' mais il faut pour cela connaître le nombre de checkbox dans chaque groupes de checkbox.

Car 'document.main.elements' compte TOUS les éléments de formulaire de la pages (même les zones de textes ou les radio button, etc)... Le javascript, c'est quand même vachement limité.

(A moins bien sûr que ce soit moi qui ne connaisse pas, ce qui est fort probable aussi)

signaler à un administrateur
Commentaire de gringo49 le 20/07/2006 10:32:36

Y'a un bug ou plutot un probleme. J'utilise ce script qui fonctionne tres bien, mais pour une page j'ai un probleme.
En effet des que je met un champ caché: <INPUT TYPE="hidden" name="MAX_FILE_SIZE" value="2000000"> pour un upload de fichier la fonction checkall() ne fonctionne plus.

document.main.elements.length : le proble vient de là je pense. Le script considere le champ caché come un element.
Je voudrais savoir si justement on peut allez plus loin en precision sur cette ligne genre: document.main.elements.check[].length ou check seul qui indique le nom des case à cocher ?

signaler à un administrateur
Commentaire de DraGuLa le 10/08/2006 15:47:44

Bah je pense pas que ça soit possible, non. Par contre, selon l'endroit où se trouve ton champ hidden, tu peux changer les indices des boucles For. Si ton champ hidden est le premier, suffit de commencer la boucle à partir de [i=2].

Si elle se trouve tout à la fin, terminer la boucle un tour avant ( [i < temp-1] comme condition d'arrêt). J'espère avoir été clair... J'passe pas souvent voir mes messages.
Adaptez-vous, didju ^^

signaler à un administrateur
Commentaire de yann_lo_san le 06/11/2007 21:55:52

pourquoi ne pas utiliser le nom de l'objet ?

for(i=0; i<document.main.elements.length; i++)
{
    if(document.main.elements[i].name.substring(0,5) == 'check')
        alert(document.f1.elements[i].checked);
}

Ajouter un commentaire



Nos sponsors

Sondage...

CalendriCode

Octobre 2008
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,14 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.