选中复选框时显示/隐藏面板答案

【问题标题】：Show/Hide Panel when checkbox is selected选中复选框时显示/隐藏面板
【发布时间】：2014-03-08 19:33:03
【问题描述】：

我想在选中复选框时显示面板，或者在未选中复选框时隐藏面板。当复选框的值更改时，以下代码可以正常工作。但是，最初（在构建网页时）始终显示面板。由于取消选中该复选框，因此不应显示 outputLabel ("hallo")。只有选中复选框后，才会显示文本。所以，这里出了点问题……

代码如下：

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html">
<h:body>

    <h:form id="myForm">
        <h:selectBooleanCheckbox id="myCheckbox" onclick="hideOrShow(this.checked);"/>
        <h:panelGrid id="myPanel" columns="2" >
            <h:outputLabel for="hallo" value="Halli Hallo" />
        </h:panelGrid>
    </h:form>

</h:body>
<script type="text/javascript">
    function hideOrShow(show) {
        var obj = document.getElementById("myForm:myPanel");
        if (show) {
            obj.style.display = "block";
        } else {
            obj.style.display = "none";
        }
    }
</script>

如何解决这个问题？

【问题讨论】：

您可以在文档准备好后将其隐藏，然后在显示和隐藏之间切换吗？
抱歉，我该怎么做？

标签： javascript jsf-2 checkbox

【解决方案1】：

显示/隐藏面板不需要 javascript。这是您的 ajax 代码版本：

 <h:form>
     <h:selectBooleanCheckbox id="myCheckbox" value="#{helloWorld.checked}">
         <f:ajax event="click" render="myPanel" execute="myPanel" />
     </h:selectBooleanCheckbox>
     <h:panelGroup id="myPanel" layout="block">
         <h:outputLabel value="hi there" rendered="#{helloWorld.checked}" />
     </h:panelGroup>
 </h:form>

和豆子

private boolean checked;
public boolean isChecked() {
    return checked;
}
public void setChecked(boolean checked) {
    this.checked = checked;
}

【讨论】：

好吧，我知道这也可以，但我想避免服务器往返。
您可以轻松做到。某些面孔（Richfaces、PrimeFaces）允许读取客户端站点上的值。也许在没有框架的 JSF 中你真的需要 javascript。
好的，我会这样做。谢谢！！
抱歉迟到了，但由于其他情况，我无法进一步处理此问题...我完全使用了您的代码，但它不起作用。 panelGroup 永远不会被渲染。
如果您需要它，那么您可以发布您的电子邮件地址，我将向您发送带有此代码的压缩项目。代码处于工作状态并经过测试。