Affichage d'un champ en fonction du checkbox

**LaVieEst...** · 07/07/2014, 09h29

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 :

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

**KpTn** · 07/07/2014, 10h44

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 !

**LaVieEst...** · 07/07/2014, 11h35

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

**KpTn** · 07/07/2014, 11h50

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.

**LaVieEst...** · 07/07/2014, 12h00

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 :

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

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

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

Affichage d'un champ en fonction du checkbox

JSF Java

Vue hybride

Discussions similaires

Partager

Partager