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

Ce site au démarrage

begin process at 2012 02 06 02:06:31

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 :21 627

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

BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai

RÉSOLUTION D'UN SYSTÈME D'ÉQUATIONS LINÉAIRES À N INCONNUES par william voirol

PLUGIN JQUERY LISTE MODIFIABLE (COMBO) AUTOCOMPLÉTÉE par medkarim

GESTION DE NUMÉRO DE TÉLÉPHONE SIMPLE DANS FIREFOX7 par rotomtom

RECOMMANDER CETTE PAGE AVEC MAILTO, ACCENT ET RETOUR LIGNE D... par weabow

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

CSS CONTENT STATE SELECTORS (PERSONNAL DRAFT) par FREMYCOMPANY

MBA : POURQUOI FAIRE ET COMMENT LE CHOISIR ? par ROMELARD Fabrice

Y'A DES ERREURS QUI PEUVENT RENDRE LE DéVELOPPEUR VIOLENT par Aleks

[HYPER-V 3] PRéSENTATION DES COMMANDLETS POWERSHELL par Pierrick CATRO-BROUILLET

IIS7 - COMPRESSION GZIP par cyril

Forum

METTRE L'ARRIERE PLAN DE SITE WEB CHANGEABLE par hassen87

RE : AFFICHER UN IFRAME SELON UN SELECT par pascalito92140

RE : VéRIFICATION FORMULAIRE par jmeunier

RE : AFFICHER UN TABLEAU CACHé SUR UNE IMAGE par Julien39

COPIER / COLLER JAVASCRIPT PHP par fregeal

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Cherche referenceur astucieux
Budget : 1 500€
Recherche expert advisor sous mql4 hedging
Budget : 200€
Creation boutique en ligne iphone- android - Republication.
Budget : 4 000€

Logiciels

Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

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

Cliquez pour télécharger Academy System
Easy-Planning (1.0.0.1)
EASY-PLANNING (1.0.0.1)

Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ...

Cliquez pour télécharger Easy-Planning
COLLECTOR PLUS (3.00B)
COLLECTOR PLUS (3.00B)

COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par : - L...

Cliquez pour télécharger COLLECTOR PLUS
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
LettresFaciles 2011 (8.0.0.1)
LETTRESFACILES 2011 (8.0.0.1)

LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types. Son inte...

Cliquez pour télécharger LettresFaciles 2011