[Struts 1.3] Checkbox et JavaScript

**ektora** · 16/06/2010, 10h45

Bonjour,

je suis novice en struts et j'ai eu la "chance"

de découvrir cet environnement dans la version 1.3.

J'ai regardé pas mal de post et de réponse mais aucune ne me permet d'avancer.

Mon problème est simple et porte sur un form dans une jsp :
* j'utilise le taglib <nested:iterate> couplé à un <nested:checkbox> pour générer une liste de d'élements à choisir

*j'aurais souhaité inclure la possibilité de
--> sélectionner toutes options d'un seul coup
--> inverser la sélection de checkbox sélectionnée
--> effacer la selection

Alors je sais faire avec un javascript mais voilà pour pouvoir l'utiliser il faut avoir accès à un des attributs id. Or les taglibs nested ou logic ou layout n'en possède pas.

Ma partie génération de liste avec checkbox :

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
<nested:iterate property="speciesGroups">
		<%-- Pour chaque espèce --%>
	<nested:notEqual property="mainList" value="P2">
		<div class="especesListePrincipale" style="float:left; width:219px;" >
			<nested:write property="groupName"/>
			</div><%-- le descriptif--%>
			<div class="especesListePrincipale" style="float:left; width:54px;">
			<%-- le checkbox--%>
				<nested:checkbox property="value" value="1"/>
				</div>
	</nested:notEqual>
	<nested:equal property="mainList" value="P2">
		<div class="especesListeSecondaire" style="float:left; width:219px; height:20px;" >
			<nested:write property="groupName"/>
			</div><%-- le descriptif--%>
			<div class="especesListeSecondaire" style="float:left; width:54px;">
			<%-- le checkbox--%>
				<nested:checkbox property="value" value="1"/>
				</div>
	</nested:equal>
</nested:iterate>

Le code javascript utilisé :

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
46
47
48
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript">
<!--
// ==========================
// Script réalisé par Eric Marcus - Aout 2006
// ==========================
 
// conteneur = id du bloc (<div>, <p> ...) contenant les checkbox
// a_faire = '0' pour tout décocher
// a_faire = '1' pour tout cocher
// a_faire = '2' pour inverser la sélection
 
function GereChkbox(conteneur, a_faire) {
var blnEtat=null;
var Chckbox = document.getElementById(conteneur).firstChild;
	while (Chckbox!=null) {
		if (Chckbox.nodeName=="INPUT")
			if (Chckbox.getAttribute("type")=="checkbox") {
				blnEtat = (a_faire=='0') ? false : (a_faire=='1') ? true : (document.getElementById(Chckbox.getAttribute("id")).checked) ? false : true;
				document.getElementById(Chckbox.getAttribute("id")).checked=blnEtat;
			}
		Chckbox = Chckbox.nextSibling;
	}
}
//-->
</script>
</head>
 
<body>
<form>
<input type="button" value="Tout cocher" onClick="GereChkbox('div_chck','1');">&nbsp;&nbsp;&nbsp;
<input type="button" value="Tout décocher" onClick="GereChkbox('div_chck','0');">&nbsp;&nbsp;&nbsp;
<input type="button" value="Inverser la sélection" onClick="GereChkbox('div_chck','2');">
<br /><br />
	<div id="div_chck">
	<input type="checkbox"  id="checkbox1" value="1"><label for="checkbox1">Choix 1</label><br />
	<input type="checkbox"  id="checkbox2" value="2"><label for="checkbox2">Choix 2</label><br />
	<input type="checkbox"  id="checkbox3" value="3"><label for="checkbox3">Choix 3</label><br />
	<input type="checkbox"  id="checkbox4" value="4"><label for="checkbox4">Choix 4</label><br />
	<input type="checkbox"  id="checkbox5" value="5"><label for="checkbox5">Choix 5</label>
	</div>
</form>
</body>
</html>

**c_nvy** · 16/06/2010, 11h33

L'équivalent en Struts de l'attribut id est l'attribut styleId :

styleId
Identifier to be assigned to this HTML element (renders an "id" attribute).

**ektora** · 17/06/2010, 16h58

Merci beaucoup j'y suis arrivé

avec le styleId et j'avais un taglib nested:iterate qui m'a permis de récupérer mon index incrémenté.
Le code pour ceux qui cherche comme moi :

<div id="div_chck2">
<nested:iterate property="speciesGroups" indexId="index2">
<nested:equal property="mainList" value="P2">
<%-- le checkbox--%>
<nested:checkbox property="value" value="1" styleId="${index2}"/>
<%-- le descriptif--%>
<nested:write property="groupName"/>
<br />
</nested:equal>
</nested:iterate>
</div>
</td>
</tr>
</table>
<p align="center">
<input type="button" value="Tout cocher" onClick="GereChkbox('div_chck2','1');">   
<input type="button" value="Tout décocher" onClick="GereChkbox('div_chck2','0');">   
<input type="button" value="Inverser la sélection" onClick="GereChkbox('div_chck2','2');">
</p>

**QuentinLec** · 31/10/2014, 16h04

Bonjour,

Ce post m'aide beaucoup, mais je suis débutant dans le monde javascript/struts et je voulais savoir comment on peut faire du coup dans la partie javascript pour coché toutes les cases.

La partie html.. normalement c'est bon.

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<div id="listerContenuReclamation">
 
<nested:iterate property="liste" id="reclamation" indexId="cpt"  type="com.commune.Reclamation">
 
<nested:equal  name="reclamation" property="etat" value="PC" >
 
<td align="center" >
    <nested:checkbox  name="reclamation" property="selected" styleId="${cpt}" value="true" />
</td>

Mais la partie javascript... Je ne sais pas quoi mettre comme argument dans

Code :

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

1
2
 
document.getElementById("?").checked=true;

pour récupérer chaque checkbox à cocher..

Si quelqu'un peut m'aiguiller !

Merci d'avance !

Quentin

**VirgApps** · 31/10/2014, 17h24

Bonjour, je n'ai lu que le dernier post mais si tu veux accéder à tous les checkbox générés dynamiquement, il vaut mieux leur mettre une classe et les intercepter avec cette classe.

HTML :

Code :

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

1
2
 
<nested:checkbox name="reclamation" property="selected" styleId="${cpt}" value="true" styleClass="maclasse"/>

Javascript :

Code :

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

1
2
3
4
5
 
var mescheckboxes = document.querySelectorAll('.maclasse');
for (var i = 0 ; i < mescheckboxes.length ; i++) {
  mescheckboxes[i].checked = true;
}