如何使用 JavaScript 获取 JSF selectBooleanCheckbox 的值？答案

【问题标题】：How to get a value of JSF selectBooleanCheckbox by using JavaScript?如何使用 JavaScript 获取 JSF selectBooleanCheckbox 的值？
【发布时间】：2014-02-06 14:48:26
【问题描述】：

我在我的 selectBooleanCheckbox 中仅将布尔值保存在名为“bean”的 backingbean 中。要在我的 JSF xhtml 页面中为该复选框设置标签，我正在使用 JSF outputText 组件。

这是 JSF 代码（在本例中它们是 2 个复选框）：

<h:selectBooleanCheckbox class="extern" value="#{bean.booleanValue1}" />
<h:outputText value="My Labeltext1"/>

<h:selectBooleanCheckbox class="extern" value="#{bean.booleanValue2}" />
<h:outputText value="My Labeltext2"/>

现在我想用 java 脚本获取选中的复选框。我正在使用 onselect 事件：

<h:selectBooleanCheckbox class="extern" value="#{bean.booleanValue1}" onselect="MyObject.update(this.options[this.selectedIndex].text);"/>
<h:outputText value="My Labeltext1"/>

<h:selectBooleanCheckbox class="extern" value="#{bean.booleanValue2}" onselect="MyObject.update(this.options[this.selectedIndex].text);"/>
<h:outputText value="My Labeltext2"/>

但这只会获取所选复选框的布尔值。是否可以获取 outputText 组件的值？有什么方法可以将输出组件与 selectBooleanCheckbox 组件连接起来吗？

【问题讨论】：

我不确定最难的部分。 JSF 只是一个 HTML 代码生成器，而 JavaScript 只在 JSF 生成的 HTML DOM 树上工作。编写 JavaScript 代码时，不要查看 JSF 源代码，而是查看其生成的 HTML 输出（您可以通过右键单击找到，在浏览器中查看源代码）。看起来您在尝试为这项工作编写 JS 代码时不必要地过多地关注 JSF 源代码。继续这一点，当您重新构建问题以用生成的 HTML 输出替换 JSF 源代码时，您将更快地从 [javascript] 专家那里获得答案。

标签： javascript jsf

【解决方案1】：

你应该给组件一个唯一的ID，然后尝试通过它们的ID在java脚本中获取这些值，你也可以使用'onclick'来调用java脚本方法。例如：

<h:selectBooleanCheckbox id="firstBox" class="extern" value="#{bean.booleanValue1}"       onclick="update(this)"/>
<h:outputText id="firstOutput" value="My Labeltext1"/>

你的 java 脚本函数看起来像这样：

  function update(val){
         var box= document.getElementById("firstBox");
         var outPut = document.getElementById("firstOutput");
        var boxValue = box.value;
        var outPutValue = outPut.value;
 }

【讨论】：