Selection multiple Checkbox + tableau

Version imprimable

Voir 40 message(s) de cette discussion en une page

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:

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:

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

19/03/2009, 10h29
emmanuel.remy

Code HTML

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

Oui daccord.

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
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>

Code

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:

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

19/03/2009, 13h08
titou_777

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?
19/03/2009, 13h28
emmanuel.remy

Choisis les bons noms

Citation:

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
19/03/2009, 13h34
titou_777

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.
19/03/2009, 13h37
andry.aime

Salut,
Ajoute alors des attributs id qui les diff�rencie.
19/03/2009, 13h49
titou_777

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

Attribut

Citation:

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:

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:

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

19/03/2009, 14h27
titou_777

Alors la je doit vous dire un grand bravo :D
Ca marche NIKEL. :king:

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;)

C'est d�j� le cas

Code:

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

19/03/2009, 16h55
titou_777

Code:

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 :roll:

PHP

Code:

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

ERE

PHP (2)

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

Code:

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

20/03/2009, 08h07
titou_777

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:cry:
20/03/2009, 10h39
emmanuel.remy

Ton code

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

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

ERE

JS:
Code:

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:

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

Attention

Voil� le code HTML que cela g�n�re finalement...

Code:

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:

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

20/03/2009, 11h04
titou_777

Non rien n'y fait :(

Ici les case ne se coche plus...

Voir 40 message(s) de cette discussion en une page