[checkbox] Code pour cocher toutes les cases

**Fladnag** · 01/06/2006, 17h37

bon, pour que ca fonctionne en PHP il faut laisse [] dans le nom.

Donc ce qu'il faut que tu change c'est la maniere de gerer ca en javascript.

document.monform.choix ne sera visiblement pas défini si on met [], il faut donc le récuperer autrement.

Par exemple en utilisant

Code :

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

1
2
<input type="checkbox" id="Master" onclick="majcheckbox(this, 'mesCoches');">
<input type="checkbox" class="mesCoches" name="choix[]" value="..." >

puis en script :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function majcheckbox(master, className) {
var liste = document.getElementsByTagName('input');
 
for(var i=0; i<liste.lenght; i++) {
  if (liste[i].className == className) {
    liste[i].checked = master.checked;
    // ou peut etre : liste[i].value = master.value;
    // ou peut etre : liste[i].value = !master.value;
  }
}
}

C'est du code non testé, donc pas forcement fonctionnel.

**Fladnag** · 01/06/2006, 20h38

Bon, finalement je suis pas trop rouillé ;o) mis a part le lenght au lieu de length (j'ai toujours du mal avec celui la ;o) le code fonctionne.

Pour preuve, voici le code fonctionnel testé sur FF et sous IE avec en plus un bouton "switch" ;o)

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
<html>
<head>
<script>
function majcheckbox(master, className) { 
	var liste = document.getElementsByTagName('input'); 
	for(var i=0; i<liste.length; i++) { 
		if (liste[i].className == className) { 
			liste[i].checked = master.checked; 
		} 
	} 
}
 
function switchcheckbox(master, className) { 
	var liste = document.getElementsByTagName('input'); 
	for(var i=0; i<liste.length; i++) { 
		if (liste[i].className == className) { 
			liste[i].checked = !liste[i].checked; 
		} 
	} 
}
 
</script>
</head>
<body>
yep ?
<form>
[ ALL : <input type="checkbox" id="Master" 
	onclick="javascript:majcheckbox(this, 'mesCoches');"> ]<br>
[ SWITCH : <input type="checkbox" id="Master" 
	onclick="javascript:switchcheckbox(this, 'mesCoches');"> ]<br>
 
 
<input type="checkbox" class="mesCoches" name="choix[]" value="1" >
<input type="checkbox" class="mesCoches" name="choix[]" value="2" >
<input type="checkbox" class="mesCoches" name="choix[]" value="3" >
<input type="checkbox" class="mesCoches" name="choix[]" value="4" >
<input type="checkbox" class="mesCoches" name="choix[]" value="4" >
</form>
</body>
</html>

(oui je sais, c'est pas tres joli, mais c'est juste pour tester ;o)

**snakejl** · 02/06/2006, 08h58

Je suis là désolé un peu tard.

le code que tu m'a donné marche et je te remercie mais j'aimerai que tu me rende un service car la j'ai fait un copier coller du code juste pour voire si sa marché mais pour mieux comprendre j'aimerai que tu m'explique sa:

Code :

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

1
2
3
4
5
6
 
function majcheckbox(master, className) { 
	var liste = document.getElementsByTagName('input'); 
	for(var i=0; i<liste.length; i++) { 
		if (liste[i].className == className) { 
			liste[i].checked = master.checked;

merci

**Fladnag** · 02/06/2006, 09h22

alors...

majcheckbox(master, className) : declaration d'une fonction prenant 2 argument.
Le premier argument (master) est un [Object HTML Element] correspondant a "this", c'est a dire l'input principal sur lequel est déclenché l'evenement onclick
Le deuxieme argument (className) est une chaine de caractere représentant le point commun de tout les input a cocher (j'y viens ;o)

On a vu que le probleme était la récupération des input checkbox de nom "choix[]". Il existe peut etre un moyen de les récuperer via une arborescence classique document.form.xxxx mais je ne la connais pas et ait eu la flemme de fouiller.
Par contre, je connais un peu les moyens de récuperer les balises html via les methodes de DHTML et de DOM.

Code :

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

var liste = document.getElementsByTagName('input');

va recuperer un tableau contenant toutes les balises de type "<input ...>" du document.

Puis, on parcourt tout le tableau, et on verifie que l'element du tableau (qui est une balise input) a pour className (attribut spécial correspondant a class="..." dans la déclaration de la balise) la chaine passée en parametre : Si c'est le cas, c'est bien une balise qu'on recherche, et alors on lui affecte la meme valeur que l'input "master" (ce qui correspond a cocher ou decocher N cases en en cochant 1 seule)

J'ai utilisé cette methode pour recuperer les balises input car les methodes de DOM sont limitées
On peut faire une recherche sur l'attribut id="..." mais il doit etre unique pour toutes les balises, donc comme on a plusieurs cases ca ne pourrait pas marcher
On peut faire une recherche sur l'attribut name="..." mais au vu des problemes précédents, j'ai préféré eviter ;o)
Enfin, on peut faire une recherche par tagName, ce que j'ai fait, mais ca renvoie "trop" de resultats (puisque la liste va contenir aussi le input master, et meme le input submit). D'ou le filtrage a posteriori sur le nom de class, mais ca aurait pu etre autre chose...

Si tu veux faire un code encore plus propre, tu peux aussi mettre ta coche master et tes coches "slaves" dans un meme div qui a un ID unique, passer this et cet ID a la methode, puis récuperer le div et parcourir toutes ses balises input enfants (voir meme passer juste "this", puis remonter a la balise parent avec this.parent pour récuperer le div ou autre)

**snakejl** · 02/06/2006, 09h36

J'ai mieux compris c'est plus claire maintenant mais sa reste compliqué quand on n'a pas l'habitude.
je te remercie de ton explication

[checkbox] Code pour cocher toutes les cases

JavaScript

Discussions similaires

Partager

Partager