Javascript 使用 h:selectBooleanCheckbox 显示/隐藏另一个输入字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3698579/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show/hide another input fields using h:selectBooleanCheckbox
提问by Sven
I am using JSF2 and Java to build a web application. I want to build a form like the one at the picture below:
我正在使用 JSF2 和 Java 来构建 Web 应用程序。我想构建一个如下图所示的表单：
When somebody unchecks the checkbox the form should disappear:
当有人取消选中复选框时，表单应该消失：
Hereis an example with gwt.
这是 gwt 的示例。
So far,
I tried some stuff with the <f:ajax>tag and an PropertyActionListenerin 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
到目前为止，我在 managedBean 中尝试了一些带有<f:ajax>标记和 an 的东西，PropertyActionListener但没有奏效。有人可以给我一个例子或至少一些提示来实现我的目标。我会很感激
采纳答案by BalusC
Use <f:ajax render="idOfPanelContainingInputFields">in the checkbox and give the component containing the input fields a renderedattribute which depends on the checkbox's state. No need for another JS code clutter.
<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>
The above example binds the checkbox to the view, you can of course also bind it to a booleanbean property, you can then remove the not emptycheck from the renderedattribute.
上面的例子将复选框绑定到视图，当然你也可以将它绑定到一个booleanbean属性，然后你可以not empty从rendered属性中删除复选框。
<h:selectBooleanCheckbox value="#{bean.showUserInfo}">
...
<ui:fragment rendered="#{bean.showUserInfo}">
See also:
也可以看看：
回答by Romain Linsolas
As suggested by amorfis, the idea of using Ajax here is not the best solution, as you will do a call to your server for a client-side manipulation.
正如 amorfis 所建议的，在这里使用 Ajax 的想法并不是最好的解决方案，因为您将调用服务器进行客户端操作。
The best solution is to use Javascript to hide your component(s). For example, if all your labels and input texts are nested in a <h:panelGrid>component, you can do that:
最好的解决方案是使用 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>
回答by amorfis
You could do it by jQuery, or another JavaScript. It is also possible by <f:ajax>, but it connects to the server, which you don't need here.
您可以通过 jQuery 或其他 JavaScript 来实现。也可以通过<f:ajax>，但它连接到服务器，您在此处不需要。
By jQuery you can just hide the form, not changing the DOM. As far as I understand, it should be enough.
通过 jQuery，您可以只隐藏表单，而不会更改 DOM。据我了解，应该够了。
Post some .xhtml if you want more :)
如果您想要更多，请发布一些 .xhtml :)
