如何显示隐藏面板组点击复选框

Question

我有一个panelgroup有一个outputText和一个href链接。我想这对panelGroup中渲染基于复选框值以下方式时复选框的值被选中（真）上 页面加载

1. panelGroup中应该呈现。
2. 如果默认情况下（在pageLoad上）未选中复选框的值，则 面板组应该不可见，但如果用户单击了复选框 ，则面板组应该是可见的。

问题：如果该复选框默认情况下不与用户点击选中复选框然后未被显示panelGroup中。我想是因为它不是在页面加载渲染所以的onClick它不能找到任何跨度隐藏/显示

这里是panelGroup中代码：

<h:panelGroup 
            styleClass="showMsg#{valNumber}" 
            rendered="#{dataItem.checkboxVal}"> 

            <h:outputText 
             styleClass="showMsg#{valNumber}" 
             style="margin-top: 18px; text-align: center;" 
             value="Text Line1" escape="false" 
             rendered="#{dataItem.checkboxVal}" /> 
            <f:verbatim> 
             <br /> 
            </f:verbatim> 
            <h:outputText 
             styleClass="showMsg#{valNumber}" 
             style="text-align: center;" value="Text Line 2" 
             escape="false" 
             rendered="#{dataItem.checkboxVal}" /> 
            <f:verbatim> 
             <br /> 
             <wps:urlGeneration 
              <a id="xyz" href="<%wpsURL.write(out);%>">ContactUs</a> 
             </wps:urlGeneration> 
            </f:verbatim> 
           </h:panelGroup> 

如果我在复选框点击，那么panelGroup中不正在显示。这是我的点击javascript功能。

<h:selectBooleanCheckbox id="xyz" styleClass='mycheckbox#{valNumber}' 
onclick="showShippingMsg(this,'#{valNumber}'); " 



    function showShippingMsg(checkbox, valNum){ 

     if(checkbox.checked){ 
      $(".showMsg"+valNum).css("display", "block"); 
     } else { 
     $(".showMsg"+valNum).css("display", "none"); 
     } 
    } 

Answer 1

那么，你总是可以使用JSF ajax功能。 下面是示例代码：

<h:panelGroupid="panel"> 
    <h:panelGroup rendered="#{bean.checkboxValue}"> 
     <!-- your content here --> 
    </h:panelGroup> 
</h:panelGroup> 

<h:selectBooleanCheckbox value="#{bean.checkboxValue}"> 
    <f:ajax event="change" render="panel"/> 
</h:selectBooleanCheckbox> 

现在，当复选框值变化时真亦假或假为真（当你点击它），阿贾克斯将火checkboxValue setter方法在bean和将启动重新 - 在渲染属性中设置id的JSF组件上呈现（在本例中为id="panel"），如果checkboxValue为true，则应呈现它。因此，如果checkboxValue为true，那么h:panelGroup属性也将为真，反之亦然。

而且在bean checkboxValue应设置是这样的：

public boolean checkboxValue; 

public void setCheckboxValue(boolean checkboxValue) { 
    this.checkboxValue = checkboxValue; 
} 

public boolean getCheckboxValue() { 
    return this.checkboxValue; 
} 

有道理？

编辑

注意，那h:selectBooleanCheckbox组件时，应嵌套在h:form为了安置自己的checkboxValue的bean。

EDIT 2

在使用AJAX的情况下，你应该尝试重新渲染整个dataTable的（不是一个真正的好主意，如果dataTable的存储大量数据）。如果这不适合你，你可以尝试为面板组设置styleClass为styleClass="your_panel_style_class#{valNumber} #{not dataItem.checkboxVal ? 'style_class_to_hide_panel' : ''}"，这将基于checkboxVal设置基本styleClass。然后摆脱面板上的rendered属性。

.style_class_to_hide_panel { 
    display: none; 
} 

那么你可以尝试把这个onlcick属性为您的复选框

function togglePanel(valNumber) { 
    var panel = $('.your_panel_style_class' + valNumber); 

    if (panel === undefined) { 
     // find your panel and select it 
    } 

    panel.toggleClass('style_class_to_hide_panel'); 
} 

不知道可靠的jQuery脚本怎么会适合你。