使用 h:selectBooleanCheckbox 显示/隐藏另一个输入字段答案

【问题标题】：Show/hide another input fields using h:selectBooleanCheckbox使用 h:selectBooleanCheckbox 显示/隐藏另一个输入字段
【发布时间】：2011-04-11 13:06:01
【问题描述】：

我正在使用 JSF2 和 Java 构建 Web 应用程序。我想构建一个如下图所示的表单：

当有人取消选中复选框时，表单应该消失：

Here 是 gwt 的一个示例。

到目前为止，我在 managedBean 中尝试了一些带有<f:ajax> 标记和PropertyActionListener 的东西，但没有奏效。有人可以给我一个例子或至少一些提示来实现我的目标。我会很感激的

【问题讨论】：

大声笑，添加了这个问题，第一个观众给它评分 -1 没有发表评论 -.-

标签： javascript jsf jsf-2

【解决方案1】：

在复选框中使用<f:ajax render="idOfPanelContainingInputFields">，并为包含输入字段的组件赋予rendered 属性，该属性取决于复选框的状态。无需再杂乱无章的 JS 代码。

<h:form>
    <fieldset>
        <legend>
            <h:selectBooleanCheckbox binding="#{showUserInfo}">
                <f:ajax render="idOfPanelContainingTextBox" />
            </h:selectBooleanCheckbox>
            <h:outputText value="User information" />
        </legend>
        <h:panelGroup id="idOfPanelContainingTextBox" layout="block">
            <ui:fragment rendered="#{not empty showUserInfo.value and showUserInfo.value}">
                <p>
                    <h:outputLabel for="firstName" value="First name:" />
                    <h:inputText id="firstName" value="#{bean.user.firstName}" />
                </p>
            </ui:fragment>
        </h:panelGroup>
    </fieldset>
</h:form>

上面的例子将复选框绑定到视图，你当然也可以将它绑定到boolean bean 属性，然后你可以从rendered 属性中删除not empty 检查。

            <h:selectBooleanCheckbox value="#{bean.showUserInfo}">

...

            <ui:fragment rendered="#{bean.showUserInfo}">

另见：

【讨论】：

【解决方案2】：

正如 amorfis 所建议的，在这里使用 Ajax 并不是最好的解决方案，因为您将调用您的服务器进行客户端操作。

最好的解决方案是使用 Javascript 来隐藏您的组件。例如，如果您的所有标签和输入文本都嵌套在 <h:panelGrid> 组件中，您可以这样做：

<script type="text/javascript">
    function hideOrShow(show) {
        // Get the panel using its ID
        var obj = document.getElementById("myForm:myPanel");
        if (show) {
            obj.style.display = "block";
        } else {
            obj.style.display = "none";
        }
    }
</script>

<h:form id="myForm">
    <h:selectBooleanCheckbox id="myCheckbox" onclick="hideOrShow(this.checked);"/>

    <h:panelGrid id="myPanel" columns="2">
        ...
    </h:panelGrid>
</h:form>

【讨论】：

@Sven 也许<h:selectBooleanCheckbox> 组件中的this.checked 工作不正常。需要检查一下，然后编辑我的答案...
@Sven 我刚刚尝试了这段代码 sn-p，一切都在我的计算机上运行（我使用的是 JSF 1.2，但这里没有特定于 JSF）。您能否更新您的问题并显示您的代码？
好的，现在可以使用了。我拼错了一个 id -.-。非常感谢你
+1，如果我能给你超过 1 票的话。我也在尝试同样的事情这么久，但我没有得到它。在这篇文章中，我尝试了@balusC 描述的其他方式，但我想这是针对 J2R4 的，但您的解决方案对我有用。非常感谢。
使用 this.checked 非常简单。不错。

【解决方案3】：

您可以通过 jQuery 或其他 JavaScript 来实现。 <f:ajax>也可以，但它连接到服务器，这里不需要。

通过 jQuery，您可以只隐藏表单，而不更改 DOM。据我了解，应该够用了。

如果您想要更多，请发布一些 .xhtml :)

【讨论】：