Cocher et décocher tous les checkbox en un clic

Version imprimable

Bonjour,
Voici le code de la fonction qui fait tout :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
// a_faire = '0' pour tout décocher 
// a_faire = '1' pour tout cocher 
// a_faire = '2' pour inverser la sélection 
function GereChkbox(conteneur, a_faire) 
{ 
var blnEtat=null; 
var Chckbox = document.getElementById(conteneur).getElementsByTagName('input'); 
for (i in Chckbox) 
{
if (Chckbox[i].nodeName=="INPUT") 
if (Chckbox[i].getAttribute("type")=="checkbox") 
{ 
blnEtat = (a_faire=='0') ? false : (a_faire=='1') ? 
true : 
(document.getElementById(Chckbox[i].getAttribute("id")).checked) ? 
false : 
true;
document.getElementById(Chckbox[i].getAttribute("id")).checked=blnEtat;
}
}
}

Et voici mes boutons cocher et décocher tout

Code:

1
2
3
4
 
<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;
<input type="button" value="Inverser la sélection" onClick="GereChkbox('div_chck','2');">

A ce niveau tout roule très bien.

Mais ce que je souhaite faire c'est remplacer ces bouttons par des liens et je fais ca :

Code:

1
2
3
4
 
<a href="javascript:void(0);" onClick="GereChkbox('tableau','1');">Tout cocher</a> | 
<a href="javascript:void(0);" onClick="GereChkbox('tableau','0');">Tout décocher</a> | 
<a href="javascript:void(0);" onClick="GereChkbox('tableau','2');">Inverser la sélection</a></p>

maintenant ca ne marche plus, qu'est-ce je dois faire?

Merci pour votre aide...

07/01/2011, 08h25
SpaceFrog

Code:

<a href="javascript:void(0);" onclick="GereChkbox('tableau','1');return false;">Tout cocher</a>

Citation:

Envoyé par SpaceFrog

Code:

<a href="javascript:void(0);" onclick="GereChkbox('tableau','1');return false;">Tout cocher</a>

Désolé ca ne marche toujours pas.

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
 
<!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">
<head>
<title></title>
<script type="text/javascript">
<!--
// ==========================
// Script réalisé par Eric Marcus - Aout 2006
// ==========================
 
// conteneur = id du bloc (<div>, <p> ...) contenant les checkbox
// a_faire = '0' pour tout décocher
// a_faire = '1' pour tout cocher
// a_faire = '2' pour inverser la sélection
 
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>
</head>
<body>
<form>
<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;
<input type="button" value="Inverser la sélection" onClick="GereChkbox('div_chck','2');"><br /><br />
<a href="javascript:void(0);" onclick="GereChkbox('tableau','1');return false;">Tout cocher</a>
<br /><br />
	<div id="div_chck">
	<input type="checkbox" name="checkbox1" id="checkbox1" value="1"><label for="checkbox1">Choix 1</label><br />
	<input type="checkbox" name="checkbox2" id="checkbox2" value="2"><label for="checkbox2">Choix 2</label><br />
	<input type="checkbox" name="checkbox3" id="checkbox3" value="3"><label for="checkbox3">Choix 3</label><br />
	<input type="checkbox" name="checkbox4" id="checkbox4" value="4"><label for="checkbox4">Choix 4</label><br />
	<input type="checkbox" name="checkbox5" id="checkbox5" value="5"><label for="checkbox5">Choix 5</label>
	</div>
</form>
</body>
</html>

07/01/2011, 08h47
Bovino

Code:

<input type="button" value="Tout cocher" onClick="GereChkbox('div_chck','1');">

Code:

<a href="javascript:void(0);" onClick="GereChkbox('tableau','1');">Tout cocher</a>

C'est normal que 'div_chck' soit devenu 'tableau' ? :koi:

Et au passage :

Citation:

Voici le code de la fonction qui fait tout :

Tout... faut pas exagérer ! :)
07/01/2011, 09h04
NoSmoking

Citation:

Envoyé par Bovino

C'est normal que 'div_chck' soit devenu 'tableau' ?

ça c'est bien vu...

Citation:

Envoyé par okoweb

Mais ce que je souhaite faire c'est remplacer ces bouttons par des liens et je fais ca :

mais pourquoi remplacer des input par des liens, il existe la balise button qui est faite pour cela, et avec un peu de CSS le tour est joué

De plus

Code:

<a href="javascript:void(0);"

c'est pas de chez top!

Code:

<a href="no_script.html" onClick="GereChkbox('div_chck','1');return false;">Tout cocher</a>

me semble plus élégant.
07/01/2011, 12h22
okoweb

Citation:

Envoyé par NoSmoking

ça c'est bien vu...

mais pourquoi remplacer des input par des liens, il existe la balise button qui est faite pour cela, et avec un peu de CSS le tour est joué

De plus

Code:

<a href="javascript:void(0);"

c'est pas de chez top!

Code:

<a href="no_script.html" onClick="GereChkbox('div_chck','1');return false;">Tout cocher</a>

me semble plus élégant.

Et que faire de la page no_script.html? Quoi dedans?

Citation:

Et que faire de la page no_script.html?

il suffit de la mettre sur ton site, elle sert à prévenir l'internaute d'activer javascript

Citation:

Quoi dedans?

un message d'avertissement avec un lien d'explication qui va bien.

exemple

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Activation JavaScript</title>
<style type="text/css">
body {
  font-family : Verdana;
  font-size : 1.0em;
  margin : 50px;
}
div {
  border : 1px solid #e0e0e0;
  width : 500px;
  padding : 50px;
  text-align : center;
  margin : auto;
}
</style>
</head>
<body>
<div>
Ce site prend toute sa splendeur avec le javascript activ&eacute;...
<h3>Activer Javascript dans votre navigateur</h3>
<br><a href="http://www.libellules.ch/browser_javascript_activ.php">pour tout savoir, ou presque, sur l'activation</a>
</div>
</body>
</html>

c'est il me semble un minimum.

07/01/2011, 13h51
Bovino

Citation:

Envoyé par NoSmoking

un message d'avertissement avec un lien d'explication qui va bien.

Idéalement, on y met surtout une alternative pour ceux ayant désactivé JavaScript, dans ton cas par exemple, la même page mais avec les checkbox activés ou non, comme l'aurait fait le code JavaScript.