CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 03 21 13:41:12

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Formulaire

> CHECKBOX PERMETTANT DE CHECKER TOUTES LES AUTRES CHECKBOXES

CHECKBOX PERMETTANT DE CHECKER TOUTES LES AUTRES CHECKBOXES

Information sur la source

Note :

9,50 / 10

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

Auteur : DraGuLa

Ecrire un message privé

Site perso

Commentaire sur cette source (11)

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

Sources de la même categorie

DÉSACTIVER UN BOUTON SUBMIT APRÈS ENVOI DU FORMULAIRE par SoftDeath

IMPLEMENTATION DE RANDOM PERSONNALISÉ par ousous

IMPLEMENTATION DE HASHTABLE par ousous

JAVASCRIPT.UTIL.ITERATOR par ousous

PALETTE DE COULEURS par titnome

Toutes les sources de la catégorie Formulaire

Commentaires et avis

Commentaire de angelo55 le 31/03/2003 16:26:54

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

Commentaire de DraGuLa le 02/04/2003 15:58:39

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

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

Commentaire de aquewel le 02/03/2005 00:34:41

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

axel

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

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 !

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)

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 ?

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 ^^

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);
}

Commentaire de ptitjib le 12/02/2009 10:31:43

et avec getAttribut("type") ...

Ajouter un commentaire

Nos sponsors

Derniers Blogs

NOUVEAU SYSTèME D'AIDE POUR VISUAL STUDIO 2010 : POUR CEUX QUI N'APPRéCIENT PAS TROP L'ABSENCE D'INDEX... par coq

L'INTERFACE NATURELLE DE WINDOWS PHONE 7 SERIES par odewit

COMMENT MAPPER UNE VUE SQL SUR UNE COLLECTION DE COMPLEX TYPE? par Matthieu MEZIL

SQL SERVER : QUERY NOTIFICATION OU COMMENT êTRE NOTIFIé DE MODIFICATIONS DE DONNéES CôTé APPLICATION (SQLDEPENDENCY) par christian

[WF4] UN BINDING ACTIVITY/ACTIVITYDESIGNER QUI PASSE MAL? par JeremyJeanson

Forum

RE : LECTEUR VIDEO FLASH + JAVASCRIPT par stonedbike

SUPPRESSION BANDEAU LECTEUR VIDEO par philou8

RE : PRELOAD IMAGES ET SWF D'UN SITE ENTIER par pegase31

PRELOAD IMAGES ET SWF D'UN SITE ENTIER par Zedbar1

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Logiciels

Academy System (10.9.4.0)
ACADEMY SYSTEM (10.9.4.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)
XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)

Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise...

Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate
Xilisoft DVD Ripper Ultimate (5.0.64.0304)
XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)

Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ...

Cliquez pour télécharger Xilisoft DVD Ripper Ultimate
Axalot, logiciel de sauvegarde de données en ligne (1.10.108.1)
AXALOT, LOGICIEL DE SAUVEGARDE DE DONNéES EN LIGNE (1.10.108.1)

Perdre tout le contenu de votre disque dur, vous imaginez ? Vos photos, vos musiques, votre compt...

Cliquez pour télécharger Axalot, logiciel de sauvegarde de données en ligne
Rigs of Rods (63.3)
RIGS OF RODS (63.3)

c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo...

Cliquez pour télécharger Rigs of Rods