tout cocher/tout décocher checkboxs

**Mo_Poly** · 07/11/2007, 00h23

Salut,

j'ai une liste de checkbox, et j'ai ajouté des bouton cocher tout/decocher tout , pour cocher les checkbox , ou les decocher

le probléme c'est que ca ne marche qu'avec le premier checkbox, avec les autres rien ne se passe

je vous montre mon code:

pour commencer le script qui est dans le <head>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
<!--
 
 
	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>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
for($i=0;$i<count($IDS);$i++)
							{
								echo"<TR>
									<TD id='nom_".($i+1)."' align=\"center\">
									$NOMS[$i]
									</TD>

									<TD id='pw_".($i+1)."' align=\"center\">
									$PWS[$i]
									</TD>

									<TD id='desc_".($i+1)."' align=\"center\">
									$DESCS[$i] 
									</TD>
									<TD align=\"center\" id=\"div_chck\">
									<input type=\"checkbox\" id='checkbox'".($i+1)."' name=projets[] value=$IDS[$i]>
									</TD>
								</TR>";
							}

...


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

est ce que vous voyez le probleme ?

merci

...

**le_chomeur** · 07/11/2007, 10h00

Salut,
étant donné qu'il y a du php dans ton script , je me permet de te donner une fonction assez simple à comprendre et à implémenter sur ton script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Check / Uncheck checkbox</title>
<script type="text/javascript">
	function checkUncheckAll(ElementRecherche,Action){
 
		var etat = Action
		var element = document.getElementById(ElementRecherche);
 
		//On va travailler avec l'élément
		with(element){
			//Recherche de tous les inputs
			var listeInput = getElementsByTagName('input');
 
			//On parcours la liste de tous les inputs
			for(var i = 0 ; i < listeInput.length ; i++){
				//On vérifit s'il s'agit d'une checkbox , si oui on la coche
				if(listeInput[i].type == "checkbox")
				{
 
					listeInput[i].checked = etat;
				}
			}
 
		}
 
	}
</script>
<body>
<div id="jaune" style="background-color:yellow">
		<input type="checkBox" name="toto" id="titi" checked="checked" />
		<input type="checkBox" name="titi" id="toto" />
		<input type="checkBox" name="tata" id="tata"  />
		<input type="checkBox" name="tutu" id="tbob" checked="checked" />
		<input type="checkBox" name="tete" id="att" checked="checked" />
</div>
 
<div id="vert" style="background-color:green">
		<input type="checkBox" name="toto" id="titi" />
		<input type="checkBox" name="titi" id="toto" />
		<input type="checkBox" name="tata" id="tata"  />
		<input type="checkBox" name="tutu" id="tbob" />
		<input type="checkBox" name="tete" id="att" />
</div>
 
 
<input type="button" onclick="checkUncheckAll('jaune',true)" value="Cocher dans jaune" />
<input type="button" onclick="checkUncheckAll('jaune',false)" value="Décocher dans jaune" />
<input type="button" onclick="checkUncheckAll('vert',false)" value="Décocher dans vert" />
<input type="button" onclick="checkUncheckAll('vert',true)" value="Cocher dans vert" />
</body>
</html>

EDIT : j'ai remplacé la ligne :
var i in listeInput par
var i = 0 ; i < listeInput.length ; i++

car il y a un gros bug sous ie6 , les 2 premiers élément ne sont pas pris en compte , voila ...
Coordialement

**Herode** · 07/11/2007, 10h29

Pour autant que je puisse déchiffrer ce code, il me semble qu'en effet le résultat obtenu est bien celui qui est codé : les <input> sont dans un <td> et il y a un <input> par <td> d'après le code PHP. Donc, sur ton code en javacsript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var Chckbox = document.getElementById(conteneur).firstChild;

renvoie bien le noeud avec <input>, mais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Chckbox = Chckbox.nextSibling;

renvoie forcément null.

Remarques au passage :
1 - est ce que

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById(Chckbox.getAttribute("id"))

a la moindre chance de renvoyer autre chose que Chckbox ???

2 - les valeurs des attributs sont des chaînes. Dans ton code PHP, il semble que les attributs name et value du <input> ne soient pas encadrés de guillemets

3 - pourquoi ne pas utiliser l'attribut name pour éplucher les <input> qui t'intéressent ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var cbs = document.getElementsByName('projets[]');
for( var i = 0; i < cbs.length; ++ i ) {/***/}

**Mo_Poly** · 07/11/2007, 15h04

Envoyé par le_chomeur

Salut,
étant donné qu'il y a du php dans ton script , je me permet de te donner une fonction assez simple à comprendre et à implémenter sur ton script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Check / Uncheck checkbox</title>
<script type="text/javascript">
	function checkUncheckAll(ElementRecherche,Action){
 
		var etat = Action
		var element = document.getElementById(ElementRecherche);
 
		//On va travailler avec l'élément
		with(element){
			//Recherche de tous les inputs
			var listeInput = getElementsByTagName('input');
 
			//On parcours la liste de tous les inputs
			for(var i = 0 ; i < listeInput.length ; i++){
				//On vérifit s'il s'agit d'une checkbox , si oui on la coche
				if(listeInput[i].type == "checkbox")
				{
 
					listeInput[i].checked = etat;
				}
			}
 
		}
 
	}
</script>
<body>
<div id="jaune" style="background-color:yellow">
		<input type="checkBox" name="toto" id="titi" checked="checked" />
		<input type="checkBox" name="titi" id="toto" />
		<input type="checkBox" name="tata" id="tata"  />
		<input type="checkBox" name="tutu" id="tbob" checked="checked" />
		<input type="checkBox" name="tete" id="att" checked="checked" />
</div>
 
<div id="vert" style="background-color:green">
		<input type="checkBox" name="toto" id="titi" />
		<input type="checkBox" name="titi" id="toto" />
		<input type="checkBox" name="tata" id="tata"  />
		<input type="checkBox" name="tutu" id="tbob" />
		<input type="checkBox" name="tete" id="att" />
</div>
 
 
<input type="button" onclick="checkUncheckAll('jaune',true)" value="Cocher dans jaune" />
<input type="button" onclick="checkUncheckAll('jaune',false)" value="Décocher dans jaune" />
<input type="button" onclick="checkUncheckAll('vert',false)" value="Décocher dans vert" />
<input type="button" onclick="checkUncheckAll('vert',true)" value="Cocher dans vert" />
</body>
</html>

EDIT : j'ai remplacé la ligne :
var i in listeInput par
var i = 0 ; i < listeInput.length ; i++

car il y a un gros bug sous ie6 , les 2 premiers élément ne sont pas pris en compte , voila ...
Coordialement

j'ai essayé ton script (je le trouve plus clair que celui que j'ai) mais j'ai encore le meme probléme, ca ne marche qu'avec le premier checkbox!!!

je te remet le code !!

primo ton script (C'est un copier coller, mais je le met quand meme)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type="text/javascript">
	function checkUncheckAll(ElementRecherche,Action){
 
		var etat = Action
		var element = document.getElementById(ElementRecherche);
 
		//On va travailler avec l'élément
		with(element){
			//Recherche de tous les inputs
			var listeInput = getElementsByTagName('input');
 
			//On parcours la liste de tous les inputs
			for(var i = 0 ; i < listeInput.length ; i++){
				//On vérifit s'il s'agit d'une checkbox , si oui on la coche
				if(listeInput[i].type == "checkbox")
				{
 
					listeInput[i].checked = etat;
				}
			}
 
		}
 
	}
</script>

puis la boucle qui affiche mon tableau (la derniere colonne du tableau contient des checkbox)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
for($i=0;$i<count($IDS);$i++)
							{
								echo"<TR>
									<TD id='nom_".($i+1)."' align=\"center\">
									$NOMS[$i]
									</TD>
 
									<TD id='pw_".($i+1)."' align=\"center\">
									$PWS[$i]
									</TD>
 
									<TD id='desc_".($i+1)."' align=\"center\">
									$DESCS[$i] 
									</TD>
									<TD align=\"center\" id=\"div_chck\">
									<input type=\"checkbox\" id='checkbox'".($i+1)."' name=projets[] value=$IDS[$i]>
									</TD>
								</TR>";
							}

finalement les 2 boutons , cocher et decocher

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<input type=\"button\" value=\"Tout cocher\" onClick=\"checkUncheckAll('div_chck',true);\">&nbsp;&nbsp;&nbsp;
				<input type=\"button\" value=\"Tout décocher\" onClick=\"checkUncheckAll('div_chck',false);\">&nbsp;&nbsp;&nbsp;
				<br /><br />

JE pense avoir fait la meme chose que toi, mais la le resultat est le meme, ca ne marche qu'avec le premier checkbox!!

merci!

...

**le_chomeur** · 07/11/2007, 15h50

ok j'ai trouvé ...

tu fais une boucle pour créer ton tableau et si on regarde l'appel sur checkUncheckAll()

on a besoins d'un conteneur pour chercher toute les checkbox qui sont contenu dedans , HORS, lorsque tu boucles, tu créer X ligne avec le même id :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
									<TD align=\"center\" id=\"div_chck\">
									<input type=\"checkbox\" id='checkbox'".($i+1)."' name=projets[] value=$IDS[$i]>
									</TD>

en l'occurence : div_chck existe plusieurs fois , il s'arrète donc a la première occurence trouvée.

essaye en mettant un id sur ton tableau plutot que sur ta td

Coordialement

**Mo_Poly** · 07/11/2007, 17h09

Envoyé par le_chomeur

ok j'ai trouvé ...

tu fais une boucle pour créer ton tableau et si on regarde l'appel sur checkUncheckAll()

on a besoins d'un conteneur pour chercher toute les checkbox qui sont contenu dedans , HORS, lorsque tu boucles, tu créer X ligne avec le même id :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
									<TD align=\"center\" id=\"div_chck\">
									<input type=\"checkbox\" id='checkbox'".($i+1)."' name=projets[] value=$IDS[$i]>
									</TD>

en l'occurence : div_chck existe plusieurs fois , il s'arrète donc a la première occurence trouvée.

essaye en mettant un id sur ton tableau plutot que sur ta td

Coordialement

j'ai essayé ca:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script type="text/javascript">
	function checkUncheckAll(ElementRecherche,Action){
	
		var etat = Action;
		for(i=1;i<=4;i++)
		{
			var element = document.getElementById(ElementRecherche+i);
		}
		//On va travailler avec l'élément
		with(element){
			//Recherche de tous les inputs
			var listeInput = getElementsByTagName('input');
			
			//On parcours la liste de tous les inputs
			for(var i = 0 ; i < listeInput.length ; i++){
				//On vérifit s'il s'agit d'une checkbox , si oui on la coche
				if(listeInput[i].type == "checkbox")
				{
					
					listeInput[i].checked = etat;
				}
			}
			
		}
		
	}
</script>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
for($i=0;$i<count($IDS);$i++)
							{
								echo"<TR>
									<TD id='nom_".($i+1)."' align=\"center\">
									$NOMS[$i]
									</TD>

									<TD id='pw_".($i+1)."' align=\"center\">
									$PWS[$i]
									</TD>

									<TD id='desc_".($i+1)."' align=\"center\">
									$DESCS[$i] 
									</TD>
									<TD align=\"center\" id='div_chck'".($i+1)."'>
									<input type=\"checkbox\" id='checkbox'".($i+1)."' name=projets[] value=$IDS[$i]>
									</TD>
								</TR>";
							}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
				<input type=\"button\" value=\"Tout cocher\" onClick=\"checkUncheckAll('div_chck',true);\">&nbsp;&nbsp;&nbsp;
				<input type=\"button\" value=\"Tout décocher\" onClick=\"checkUncheckAll('div_chck',false);\">&nbsp;&nbsp;&nbsp;
				<br /><br />