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