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&#233;cocher</a> | 
<a href="javascript:void(0);" onClick="GereChkbox('tableau','2');">Inverser la s&#233;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

Citation:

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 :

Citation:

Voici le code de la fonction qui fait tout :

Tout... faut pas exagérer !

NoSmoking · 07/01/2011, 09h04

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 :

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

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 :

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

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 :

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

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.

07/01/2011, 08h25	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 005 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 005 Points : 45 088 Points : 45 088	Code : Sélectionner tout - Visualiser dans une fenêtre à part <a href="javascript:void(0);" onclick="GereChkbox('tableau','1');return false;">Tout cocher</a> __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email