Cocher et décocher tous les checkbox en un clic

**okoweb** · 07/01/2011, 08h11

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

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

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

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 :

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

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

**SpaceFrog** · 07/01/2011, 08h25

Code :

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

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

**okoweb** · 07/01/2011, 08h30

Envoyé par SpaceFrog

Code :

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

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

Désolé ca ne marche toujours pas.

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

**Bovino** · 07/01/2011, 08h47

Code :

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

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

Code :

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

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

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

Et au passage :

Voici le code de la fonction qui fait tout :

Tout... faut pas exagérer !

**NoSmoking** · 07/01/2011, 09h04

Envoyé par Bovino

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

ça c'est bien vu...

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 :

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

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

c'est pas de chez top!

Code :

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

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

me semble plus élégant.

**okoweb** · 07/01/2011, 12h22

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 :

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

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

c'est pas de chez top!

Code :

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

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

**NoSmoking** · 07/01/2011, 12h51

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

Quoi dedans?

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

exemple

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

**Bovino** · 07/01/2011, 13h51

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.

Cocher et décocher tous les checkbox en un clic

JavaScript

Discussions similaires

Partager

Partager