使用h:selectBooleanCheckbox显示/隐藏其他输入字段 [英] Show/hide another input fields using h:selectBooleanCheckbox

问题描述

我正在使用JSF2和Java来构建Web应用程序.我想构建如下图所示的表单:

I am using JSF2 and Java to build a web application. I want to build a form like the one at the picture below:

当有人取消选中该复选框时，该表格应消失:

When somebody unchecks the checkbox the form should disappear:

此处是gwt的示例.

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

So far, I tried some stuff with the <f:ajax> tag and an PropertyActionListener in the managedBean but it didn't work. Can somebody give me an example or at least some hints to accomplish my goal. I would be really thankfull

推荐答案

在复选框中使用<f:ajax render="idOfPanelContainingInputFields">，并为包含输入字段的组件提供一个rendered属性，该属性取决于复选框的状态.无需其他JS代码.

Use <f:ajax render="idOfPanelContainingInputFields"> in the checkbox and give the component containing the input fields a rendered attribute which depends on the checkbox's state. No need for another JS code clutter.

<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支票.

The above example binds the checkbox to the view, you can of course also bind it to a boolean bean property, you can then remove the not empty check from the rendered attribute.

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

...

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

另请参见:

• 如何找出要进行Ajax更新/渲染的组件的客户端ID?找不到表达式为"foo"的组件；引用自"bar"
• 为什么我需要嵌套带有render ==#{some}"的组件?在另一个组件中，当我想对其进行ajax更新时?

See also:

• How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
• Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?

这篇关于使用h:selectBooleanCheckbox显示/隐藏其他输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！