tout cocher/tout décocher checkboxs

Version imprimable

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:

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:

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 ? :aie:

merci

...

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:

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

07/11/2007, 10h29
Herode
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:

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

renvoie bien le noeud avec <input>, mais

Code:

Chckbox = Chckbox.nextSibling;

renvoie forcément null.

Remarques au passage :
1 - est ce que

Code:

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:

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

Citation:

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:

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>

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:

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:

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:

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!

...

07/11/2007, 15h50
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:

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

Citation:

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:

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:

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:

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:

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

et ca ne marche pas !! meme pas avec le premier checkbox!!!!!!!! :(

...

07/11/2007, 21h39
Mo_Poly

yessssssss, j'avais mal lu, en mettant l'id sur le <table> ca marché

merci :)

...