Sélection de toutes les cases à cocher d'une page

Version imprimable

11/07/2007, 08h40
maverick56

Sélection de toutes les cases à cocher d'une page

bonjour
je créé un tableau avec des checkbox a l'aide d'un for.
et je voudrais faire un bouton "tout séléctionner" et un autre " tout désélectionner".
mais je sais pas comment faire ...

pourriez vous m'aider svp

merci
11/07/2007, 08h55
sharrascript

bonjour,

Pas faisable en PHP... Tu trouvera ton bonheur du coté javascript ;)

++
11/07/2007, 09h21
Celira

Bonjour

Effectivement en php seul, ce n'est pas possible et il va falloir ajouter un peu de javascript.

Je te conseille d'aller voir cette source en JS : Sélectionner/désélectionner plusieurs cases à cocher

alors voila j'ai trouvé ce code :
Entre <HEAD> et </HEAD> :

Code:

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

Entre <BODY> et </BODY> :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<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 />
	<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>

et puis j'ai essayer de l'adapter pour moi ...
mais moi j'ai un tableau, et la j'ai des gros problemes avec le <div>

voila a peu pres ce que j'ai :

Code:

1
2
3
4
5
6
 
<div id="div_chck">
    <td>
         <input type="checkbox" name="checkbox1" id="checkbox1" value="1"><label for="checkbox1">Choix 1</label>
    </td>
</div>

mais dès que j'ajoute les td, ba ca marche plus ....
:roll:

avez vous une idée de prk ?

merci

ps : je viens de tester avec tr, et ca marche, JE NI COMPREND RIEN !!!!

11/07/2007, 13h08
maverick56

personne ne voix comment faire co-habiter div et table ??
ca doit pourtant etre possible !
11/07/2007, 13h16
Matthieu2000

firstChild -> renvoie l'enfant !

Chckbox.nextSibling ->renvoie lesuivant

dans ton cas c'est des td!!

fais une recherche sur

Citation:

getElementByTagname

...
11/07/2007, 13h31
maverick56

c koi getElementByTagname ?

comme je l'ai dit ce code n'est pas le mien, j'essaie de l'adapter c tout !
tu pense que l'erreur viens de la fonction javascript ? (c pas la que je cherchais !)

est ce que tu pourrais m'e dire plus , je comprend pas trop ...

merci
11/07/2007, 13h36
Matthieu2000

:faq: :tutoriel:

Code:

inputtableau=document.getElementById(conteneur).getElementByTagName("input");

ceci te renvoie la liste des éléments "input" de ton conteneur.
11/07/2007, 13h50
maverick56

je suis dsl matthieu mais je vois pas ce que tu veux que j'essaie ???
(je doit etre un peu c.. )

tu voudrais pas me renvoyer mon code avec t modif ? :)
merci

alors j'ai trouver une modif du code précédent qui est sencé fonctionner ...

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
 
Tout d'abord créez votre tableau HTML
 
<table id_tableau> <tr><td>code</td><td>libelle</td></tr>
<tr><td><input type="checkbox" ....></td><td>Rouge</td></tr>
<tr><td><input type="checkbox" ....></td><td>Jaune</td></tr>
<tr><td><input type="checkbox" ....></td><td>Vert</td></tr>
</table>
 
 
Puis ajouter vos boutons pour déclencher le traitement voulu
 
<input type="button" value="Tout cocher" onClick="GereChkbox('tableau','1');" class="button">
<input type="button" value="Tout décocher" onClick="GereChkbox('tableau','0');" class="button">
<input type="button" value="Inverser la sélection" onClick="GereChkbox('tableau','2');" class="button">
 
 
Enfin faites votre javascript comme ceci
 
// 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;
}
}
}

mais j'arrive pas a le faire tourner ... :) :) :bug:

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
<script language="JavaScript"> 
 
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 :!Chckbox[i].checked;
Chckbox[i].checked=blnEtat;
}
}
}
 
 
</script> 
 
 
<table id="id_tableau"> <tr><td>code</td><td>libelle</td></tr>
<tr><td><input type="checkbox" ....></td><td>Rouge</td></tr>
<tr><td><input type="checkbox" ....></td><td>Jaune</td></tr>
<tr><td><input type="checkbox" ....></td><td>Vert</td></tr>
</table>
 
 
<input type="button" value="Tout cocher" onClick="GereChkbox('id_tableau','1');" class="button"> 
<input type="button" value="Tout décocher" onClick="GereChkbox('id_tableau','0');" class="button"> 
<input type="button" value="Inverser la sélection" onClick="GereChkbox('id_tableau','2');" class="button">

11/07/2007, 15h14
maverick56

super ca mrche o poil !
merci matthieu