Afficher un PanelGroup en fonction d'un bouton radio sélectionné

Bonjour,

J'ai un formulaire dans lequel je souhaite afficher un des trois PanelGroup en fonction d'un bouton radio sélectionné. J'ai utilisé du Javasccript mais ça ne fonctionne pas.

Le code est le suivant:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<h:form id="form">
    <h:selectOneRadio id="mesradio" onchange="showSection(this.form)">
        <f:selectItem itemValue="sect1" itemLabel="Show section1" />
        <f:selectItem itemValue="sect2" itemLabel="Show section2" />
        <f:selectItem itemValue="sect3" itemLabel="Show section3" />
    </h:selectOneRadio>
 
    <h:panelGrid id="section1" class="section">section1</h:panelGrid >
    <h:panelGrid id="section2" class="section">section2</h:panelGrid>
    <h:panelGrid id="section3" class="section">section3</h:panelGrid>
    <h:panelGrid id="section4" class="section">section4</h:panelGrid>
 
</h:form>

le code Javascript est le suivant:

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
<script type="text/javascript">
 
                    function showDisplay() {
                      var show=document.getElementById("mesradio").click();
                       var sec1=document.getElementById("monform:sect1");
                       var sec2=document.getElementById("monform:sect2");
                       var sec3=document.getElementById("monform:sect3");
                       switch(show)
                       {
                       case"sect1":
                           sec1.style.display.block = "block";
                           sec2.style.display.none = "none";
                           sec3.style.display.none = "none";
                           break;
                       case"sect2":
                           sec2.style.display.block = "block";
                           sec1.style.display.none = "none";
                           sec3.style.display.none = "none";
                           break;
                       case"sect3":
                           sec3.style.display.block = "block";
                           sec1.style.display.none = "none";
                           sec2.style.display.none = "none";
                           break;
                       }
 
                    }

Quelqu'un saurait-il m'indiquer comment résoudre ce problème ?

Merci d'avance pour votre aide.