Selection multiple Checkbox + tableau

**titou_777** · 19/03/2009, 09h07

Bonjour. Voila un probleme deja traité plusieur fois, cependant après lecture de la FAC et une recherche sur le forum je n'ai pas trouvé chaussure a mon pied.

http://javascript.developpez.com/sou...forms#checkall

J'ai trouvé plein de source dans ce genre, cependant je n'arrive pas a les adapter a ma situation. (Javascript n'etant pas ma tasse de thé je dois l'avouer)

Voila ma situation:
J'ai un tableau, replit automatiquement par un parcoure de collection d'objet. Je parcours les type, jaffiche le premier, je parcours les machine, j'affiche les machine correspondante a ce type, jaffiche le deuxieme type, j'affiche les machine de ce dernier, etc...

Ce que je veux, c'est lors du clik sur un checkbox situé en face d'un type, qu'il me coche les checkbox situés en face des machine de ce reseau.

voila mon php:

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
if(empty($collec_type_bis)==false){
				while(list($idt, $obj_type) = each($collec_type_bis)){
					echo '<tr>';
						echo '<td></td>';
						echo '<td>'; echo $obj_type->get_nom(); echo '</td>';
						echo '<td><input type="checkbox" name="affiche_tt[]" value="'; echo time(); echo '" onClick=\'javascript:cocher('; echo $obj_res->get_nom().$obj_type->get_id(), '1'; echo ')\' /></td>';
						echo '<td></td>';
						echo '<td></td>';
					echo '</tr>';
 
					$i=0;	
					$collec_machine_bis=$collec_machine;
					if(empty($collec_machine_bis)==false){
						while(list($idm, $objm) = each($collec_machine_bis)){
							if($objm->get_id_reseau()==$obj_res->get_id()){
								if($objm->get_no_type()==$obj_type->get_id()){
									echo '<tr>';
										echo '<td></td>';
										echo '<td></td>';
										echo '<td>'; echo $objm->get_nom(); echo '</td>';
										echo '<td><input type="checkbox" name="affiche[]" id="'; echo $obj_res->get_nom().$obj_type->get_id().$i; echo '" value="'; echo $objm->get_id(); echo '" /></td>';
										echo '<td><input type="checkbox" name="renom[]" value="'; echo $objm->get_id(); echo '" /><input type="text" name="renom_text_'; echo $objm->get_id(); echo '" value="'; echo $objm->get_nom(); echo '" /></td>';
									echo '</tr>';
									$i++;
								}
							}
						}
					}

Et voila ma fonction a l'etat actuel:

Code :

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

1
2
3
4
5
6
7
8
9
10
function cocher($id, choix) {
	for (i=0; i<document.form.select[].length; i++) {
	    if (choix == 0)
	    	//decochage de toutes les checkbox
	    	document.getElementById($id+i).checked=false;
	   else
	    	//cochage de toutes les checkbox
		   document.getElementById($id+i).checked=true;
	}
}

P.S: J'ai entendu sur le forum que le tableau posait des probleme de validation w3c?? Comment faire la meme chose sans les tableau??

Merci d'avance

**emmanuel.remy** · 19/03/2009, 10h29

Peux tu passer ton code HTML généré, c'est quand même plus pratique pour faire un test rapide... et te proposer une soluce adaptée.

ERE

**titou_777** · 19/03/2009, 10h34

Oui daccord.

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
<script type="text/javascript">
 
function cocheTous(nameCheckBoxes, valeur){
	var liste = document.getElementById[nameCheckBoxes];
 
	for (var i=0; i<liste.length; i++) {
		liste[i].checked = valeur;
	}
}
 
</script>
</head>
<body>
<div id="entete">
<form name="form" action="configuration.php" enctype="multipart/form-data" method="post">
<table border="1">
<caption>Liaison(s)</caption>
<tr>
<th>Nom</th></tr>
<tr><td>Ethernet</td></tr>
<tr><td>USB</td></tr>
<tr><td>Wifi</td></tr>
</table> 
<table border="1">
<caption>Réseau(x)</caption>
<tr><th>Réseau(x)</th><th>Type(s)</th><th>Machine(s)</th><th>Ne pas afficher</th><th>Renomer</th></tr>
<tr><td>LAN</td><td></td><td></td><td></td><td></td></tr><tr><td></td><td>Imprimante</td><td><input type="checkbox" name="affiche_tt[]" value="1237455342" onclick="cocheTous('affiche', thischecked );" /></td><td></td><td></td></tr>
<tr><td></td><td></td><td>//Geid/HP_PAIE</td><td><input type="checkbox" name="affiche[]" id="LAN450" value="1237454720_50" /></td><td><input type="checkbox" name="renom[]" value="1237454720_50" /><input type="text" name="renom_text_1237454720_50" value="//Geid/HP_PAIE" /></td></tr>
<tr><td></td><td></td><td>//Ciril/copieur3</td><td><input type="checkbox" name="affiche[]" id="LAN451" value="1237454720_51" /></td><td><input type="checkbox" name="renom[]" value="1237454720_51" /><input type="text" name="renom_text_1237454720_51" value="//Ciril/copieur3" /></td></tr>
<tr><td></td><td>Inconnu</td><td><input type="checkbox" name="affiche_tt[]" value="1237455342" onclick="cocheTous('affiche', thischecked );" /></td><td></td><td></td></tr>
<tr><td></td><td>Serveur</td><td><input type="checkbox" name="affiche_tt[]" value="1237455342" onclick="cocheTous('affiche', thischecked );" /></td><td></td><td></td></tr>
<tr><td></td><td></td><td>GMAO</td><td><input type="checkbox" name="affiche[]" id="LAN1270" value="1237454720_8" /></td><td><input type="checkbox" name="renom[]" value="1237454720_8" /><input type="text" name="renom_text_1237454720_8" value="GMAO" /></td></tr>
<tr><td></td><td>Station</td><td><input type="checkbox" name="affiche_tt[]" value="1237455342" onclick="cocheTous('affiche', thischecked );" /></td><td></td><td></td></tr>
<tr><td></td><td></td><td>PAIE4</td><td><input type="checkbox" name="affiche[]" id="LAN460" value="1237454720_1" /></td><td><input type="checkbox" name="renom[]" value="1237454720_1" /><input type="text" name="renom_text_1237454720_1" value="PAIE4" /></td></tr>
<tr><td></td><td></td><td>PAIE3</td><td><input type="checkbox" name="affiche[]" id="LAN461" value="1237454720_2" /></td><td><input type="checkbox" name="renom[]" value="1237454720_2" /><input type="text" name="renom_text_1237454720_2" value="PAIE3" /></td></tr>
</table> 
<input type="submit" name="btn_edit" value="Editer" />
</form>
</div>
<div id="pied_page">
<a href="http://validator.w3.org/"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional" /></a><a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="CSS Valide !" />
</a>
</div>
</body>
</html>

**emmanuel.remy** · 19/03/2009, 11h38

Hormis le fait que ton code généré comporte beaucoup d'erreurs (tu génères des thischecked au lieu de this.checked, les Warning PHP, etc...) la fonction qui remplace celle que tu essayais d'écrire:

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
 
<script type="text/javascript">
 
/* REMPLACE
function cocheTous(nameCheckBoxes, valeur){
	var liste = document.getElementById[nameCheckBoxes];
 
	for (var i=0; i<liste.length; i++) {
		liste[i].checked = valeur;
	}
}
PAR */
 
function cocheTous(nameCheckBoxes, valeur){
	//enlève les crochets ici si tu les ajoutes correctement dans la 
        //génération de ton code par PHP
       var liste = document.getElementsByName(nameCheckBoxes+"[]");
 
	for (var i=0; i<liste.length; i++) {
		liste[i].checked = valeur;
	}
}
 
</script>

Attention au fait que le name de tes checkbox est bien celui inscrit dans l'attribut name, crochets compris

ERE

**titou_777** · 19/03/2009, 13h08

Tout d'abord merci.
Il y a du mieu dans ma solution.

Pour ce qui est des warning et compagnie, j'ai solutioné le probleme.

Sur le click de la case a cocher, cela fonctionne cependant pas totalement comme je le voudrait puisque ilme coche toute les cases qui suivent.
Or je ne veut que celle qui appartiennent au meme type et au meme reseau.

Ne faut il pas leur passer un identifiant specifique? Et passer par celui la?

**emmanuel.remy** · 19/03/2009, 13h28

Sur le click de la case a cocher, cela fonctionne cependant pas totalement comme je le voudrait puisque ilme coche toute les cases qui suivent.

Nuance: le click fonctionne d'après ce que tu as codé en PHP. C'est toi qui génère les noms et aux emplacements désirés. Et dans ton cas, effectivement tu as des checkbox avec le même name un peu partout d'où ce que tu constastes.

Tu peux résoudre ça en générant correctement les name des checkbox dans ton script PHP. C'est toi qui choisit les noms et qui les inscrit, donc arrange toi pour qu'ils soient cohérents avec le comportement que tu attends et aux bons emplacements. Ainsi ton code Javascript restera aussi simple que ce qu'il est actuellement.

A mon avis dans ce cas de figure cela n'a pas d'intérêt de surcharger ton code Javascript alors que tout peut être réalisé sur le server.

ERE

**titou_777** · 19/03/2009, 13h34

Il n'y a aucun moyen de faire sans changer les nom de mes chckbx??
Psk jai deja pas mal de code derriere qui fonctionne dessus.

**andry.aime** · 19/03/2009, 13h37

Salut,
Ajoute alors des attributs id qui les différencie.

**titou_777** · 19/03/2009, 13h49

Il faut modifier la fonction dans ce cas?? Pour quelle differencie mes check grace a leurs id...

**emmanuel.remy** · 19/03/2009, 14h17

Envoyé par titou_777

Il faut modifier la fonction dans ce cas?? Pour quelle differencie mes check grace a leurs id...

Ajoute par ex un attribut titouType en fonction du type de la checkbox (LAN, ...). Ensuite:

Code :

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

1
2
3
4
5
6
7
8
9
 
function cocheTous(nameCheckBoxes, valeur, typeValue){
	var liste = document.getElementsByName(nameCheckBoxes+"[]");
	for (var i=0; i<liste.length; i++) {
                if (liste[i].getAttribute('titouType')== typeValue) {
                      liste[i].checked = valeur;
                } 
        }
}

pour une case à cocher du type:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
          <tr><td></td><td></td><td>//Geid/HP_PAIE</td><td>
              <input type="checkbox" name="affiche[]" titouType="LAN" id="LAN450" value="1237454720_50"  /></td><td>
              <input type="checkbox" name="renom[]" value="1237454720_50" />
              <input  type="text" name="renom_text_1237454720_50" value="//Geid/HP_PAIE"  /></td>
          </tr>
          <tr><td></td><td></td><td>//Ciril/copieur3</td><td>
              <input  type="checkbox" name="affiche[]" titouType="LAN" id="LAN451" value="1237454720_51"  /></td><td>
              <input type="checkbox" name="renom[]" value="1237454720_51" />
              <input  type="text" name="renom_text_1237454720_51" value="//Ciril/copieur3"  /></td>
          </tr>

ERE

**titou_777** · 19/03/2009, 14h27

Alors la je doit vous dire un grand bravo

Ca marche NIKEL.

Une derniere question... Juste pour la route:
Comment dans l'appel de ma fonction js, changer la valeur du champ valeur.

Je m'explik: Je voudrais just qu'il alterne true et false. Pour que kan je decoche ma case ca decoche les case koi.

Merci merci encore

**emmanuel.remy** · 19/03/2009, 16h45

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<input type="checkbox"  name="affiche_tt[]" value="1237455342" 
         onclick="cocheTous('affiche', this.checked ,'LAN' );"  />

...
              <td>//Geid/HP_PAIE</td><td>
                   <input type="checkbox" name="affiche[]" id="LAN450" 
                                   titouType="LAN"/></td><td>

...
              <td>//Ciril/copieur3</td><td>
                        <input  type="checkbox" name="affiche[]" id="LAN451"  
                                    titouType="LAN"/></td><td>

Comme lors du click tu envoies à valeur this.checked, cela inverse déjà automatiquement l'état des cases...

ERE

**titou_777** · 19/03/2009, 16h55

Code :

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

echo'<input ... onclick="javascript:cocherTous(\'affiche\''.',\''.$obj_res->get_nom().$obj_type->get_id().'\','.this.checked+');" />

Voila l'apel de ma fonction. N'y a t - il pas un risque qu'il me confonde le .checked avec un un point de concatenation??

En effet, il me renvoi une erreur js. Donc je pense qu'il prend le "." pr une concatenation... Ceci explik cela

**emmanuel.remy** · 19/03/2009, 17h53

Code :

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

1
2
 
echo("<input ... onclick=\"javascript:cocherTous('affiche','{$obj_res->get_nom()}{$obj_type->get_id()}','this.checked');\"/>" );

ERE

**emmanuel.remy** · 19/03/2009, 18h00

Au cas où tu souhaites prendre ton mode echo, voilà ton erreur:

Code :

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

1
2
3
4
5
6
 
  //corrigé
  echo '<input ... onclick="javascript:cocherTous(\'affiche\''.',\''.$obj_res->get_nom().$obj_res->get_id().'\',this.checked);" />';
 
  //ton écho initial
  echo '<input ... onclick="javascript:cocherTous(\'affiche\''.',\''.$obj_res->get_nom().$obj_type->get_id().'\','.this.checked+');" />

ERE

**titou_777** · 20/03/2009, 08h07

Tout d'abord merci de prendre mon probleme en concideration.
J'ai essayé avec votre premiere solution, mais pas de changement quand je decoche ma case (les autres restent toutes cochées).

Quant a la deuxieme (avec un echo ''), elle ne marche pas du tout je crois

**emmanuel.remy** · 20/03/2009, 10h39

J'ai essayé de mon côté cela fonctionne parfaitement.

Envoie ton code j'y jetterai un coup d'oeil.

ERE

**titou_777** · 20/03/2009, 10h42

JS:

Code :

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

1
2
3
4
5
6
7
8
9
function cocherTous(nameCheckBoxes, idCheckBoxes, valeur){
	var liste = document.getElementsByName(nameCheckBoxes+"[]");
 
	for (var i=0; i<liste.length; i++) {
		if (liste[i].getAttribute('chkType')== idCheckBoxes) {
			liste[i].checked = valeur;
		} 
	}
}

Php:

Code :

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

echo ("<td><input type=\"checkbox\" name=\"affiche_tt[]\" value=\"'; echo time(); echo '\" onclick=\"javascript:cocherTous('affiche','{$obj_res->get_nom()}{$obj_type->get_id()}','this.checked');\"/></td>" );

Thks

**emmanuel.remy** · 20/03/2009, 10h59

Voilà le code HTML que cela génère finalement...

Code :

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

1
2
<td><input type="checkbox" name="affiche_tt[]" value="'; echo time(); echo '" onclick="javascript:cocherTous('affiche','super54545','this.checked');"/></td>

Y'a un blème, non ?
Essaie plutôt cela:

Code :

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

1
2
3
4
 
echo ("<td><input type=\"checkbox\" name=\"affiche_tt[]\" value=\""); 
echo time(); 
echo ("\" onclick=\"javascript:cocherTous('affiche','{$obj_res->get_nom()}{$obj_res->get_id()}',this.checked);\"/></td>" );

ERE

**titou_777** · 20/03/2009, 11h04

Non rien n'y fait

Ici les case ne se coche plus...

Selection multiple Checkbox + tableau

JavaScript

Discussions similaires

Partager

Partager