Affichage d'un champ en fonction du checkbox

Version imprimable

Bonjour tout le monde,

J'aimerai pouvoir afficher un contenu (un champ d'un formulaire) en fonction si le checkbox est cocher ou décocher.
ci-dessous mon code (qui ne marche pas et je ne sais pas pourquoi: mon bouton checkbox cocher ou décocher n'a aucun effet sur l'affichage ou non de mon champ de formulaire)

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
<?xml version="1.0" encoding="UTF-8"?>
<!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"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"> 
 
<h:head>
    <title>Formulaire JSF2.0</title>
    <link rel="stylesheet" type="text/css" href="/style.css"></link>
</h:head>
<h:body>
<h:form>
<h:selectBooleanCheckbox id="chartDept" title="chartDept" onclick="showCheck()"></h:selectBooleanCheckbox>
<h:outputText value="By Dept  "/>
<pre id="deptPie" style="display: none">
    <p:pieChart  value="#{pieBean.pieModelDept}" legendPosition="w" title="Model dept" style="width:500px;height:410px" />
</pre>
<script type="text/javascript">
    //<![CDATA[
             function showCheck() {
                     if (document.getElementById('j_idt6:chartDept').checked) == true) {
                         document.getElementById('deptPie').style.display = "block";
                     }
                     else {
                         document.getElementById('deptPie').style.display = "none";
                     }
                 };
         //]]>   
    </script>
</h:form>
</h:body>
</html>

Quelqu'un peux me débloquer SVP ?

Merci par avance

07/07/2014, 10h44
KpTn

Déjà tu as une parenthèse en trop après le mot checked dans ton code JavaScript.

De plus il n'y a aucun champ dans ta page qui porte l'id deptPie donc rien ne s'affichera !
07/07/2014, 11h35
LaVieEst...

Citation:

Envoyé par KpTn

Déjà tu as une parenthèse en trop après le mot checked dans ton code JavaScript.

De plus il n'y a aucun champ dans ta page qui porte l'id deptPie donc rien ne s'affichera !

Je n'ai pas bien copier mon code
editer plus haut
07/07/2014, 11h50
KpTn

Même dans le nouveau code que tu as édité tu as toujours une parenthèse fermante en trop après le mot checked dans ton code JavaScript.

Ton problème vient sûrement de là.

Je ne sais pas quel navigateur tu utilises mais tu dois voir une erreur JavaScript se produire et donc empêcher ton code de s'exécuter.

Citation:

Envoyé par KpTn

Même dans le nouveau code que tu as édité tu as toujours une parenthèse fermante en trop après le mot checked dans ton code JavaScript.

Ton problème vient sûrement de là.

Je ne sais pas quel navigateur tu utilises mais tu dois voir une erreur JavaScript se produire et donc empêcher ton code de s'exécuter.

effectivement y avais une parenthèse de plus. Sauf que même si je l'ai enlevé je n'ai aucun changement quand je décoche ou coche le checkbox rien qui se produit.
J'utilise Firefox 30.0 comme navigateur.

ci-dessous le code html qui se produit je l'ai récupéré avec Firebug
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <form id="j_idt6" enctype="application/x-www-form-urlencoded" action="/formulaire_jsf/faces/formulaire.xhtml" method="post" name="j_idt6"> <input type="hidden" value="j_idt6" name="j_idt6"> <input id="j_idt6:chartDept" type="checkbox" onclick="showCheck()" title="chartDept" name="j_idt6:chartDept"> By Dept <pre id="deptPie" style="display: block;"> <div id="j_idt6:j_idt13" style="width:500px;height:410px"></div> </pre> <script type="text/javascript"> //<![CDATA[ function showCheck() { if (document.getElementById('j_idt6:chartDept').checked == true) { document.getElementById('deptPie').style.display = "block"; } else { document.getElementById('deptPie').style.display = "none"; } }; //]]> </script>

07/07/2014, 12h58
LaVieEst...

Merci bien
c'est vrai que la parenthèse de plus qui était la source du problème

J'ai du coup initialisé la valeur du checkbox à true et j'ai mis le style diplay initial à block et ça marche maintenant.

Merci pour votre aide