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