从一个 <h:selectOneRadio> 中选择另一个 <h:selectOneRadio>答案

【问题标题】：Selecting another <h:selectOneRadio> from inside one <h:selectOneRadio>从一个 <h:selectOneRadio> 中选择另一个 <h:selectOneRadio>
【发布时间】：2013-04-10 10:27:16
【问题描述】：

我正在尝试制作一个 Facelet，其中有两行，每行包含两个单选按钮。我想这样做，如果在第一行中选择了第一个单选按钮，则应该选择第二行中的第二个单选按钮，反之亦然。我正在尝试使用 JavaScript，但更改仍未反映在浏览器中。

这里是 Javascript：

<script type="text/javascript">
  function radioSelect(val){
    if(val.id == "encrypted:1")
{
document.getElementById("protected:0").value = "false";
document.getElementById("protected:1").value = "true";
}
else
{
document.getElementById("protected:0").value = "true";
document.getElementById("protected:1").value = "false";
}

}
</script>

这是我的 Facelet 文件中的一段代码：

<h:selectOneRadio id="encrypted"
                value="#{uploadFileBean.encryption}" onclick="radioSelect(this);">
                <f:selectItem itemLabel="Yes" itemValue="true"></f:selectItem>
                <f:selectItem itemLabel="No" itemValue="false"></f:selectItem>
            </h:selectOneRadio>
<h:selectOneRadio id="protected"
                value="#{uploadFileBean.fileprotected}">
                <f:selectItem itemLabel="Yes" itemValue="true"></f:selectItem>
                <f:selectItem itemLabel="No" itemValue="false"></f:selectItem>
            </h:selectOneRadio>

好吧，当我尝试编写这个 JavaScript 函数时，Ajax 更改不起作用。

    <script type="text/javascript">
function radioSelect(val){
if(val.id == "encrypted:1")
{
document.getElementById("protected:0").value = "false";
document.getElementById("protected:1").value = "true";
}
if(val.id == "protected:1")
{
document.getElementById("encrypted:0").value = "false";
document.getElementById("encrypted:1").value = "true";
}
if(val.id == "encrypted:0")
{
document.getElementById("protected:0").value = "false";
document.getElementById("protected:1").value = "true";
}
if(val.id == "protected:0")
{
document.getElementById("encrypted:0").value = "true";
document.getElementById("encrypted:1").value = "false";
}
}
</script>

【问题讨论】：

你确定不应该是document.getElementById("protected")，因为我没有看到:0 吗？并且设置值不会检查单选按钮！
我认为您需要根据执行操作的单选按钮重新渲染组件。
是的，我尝试过“protected”，但是在 Chrome 上调试时我找不到 value 属性，所以我使用了 protected:0 来更改它的值，但它没有这样做。
@dShringi - 我不明白你的意思是重新渲染组件？
当你改变了组件的值，你需要使用<f:ajax render="otherRadioGroup">重新渲染它。

标签： javascript jsf facelets selectoneradio

【解决方案1】：

当您更改它的值时，您使用的 JavaScript 也可以正常工作，但是要在 facelet 上反映这些更改，您需要更新保存已更改值的组件。

f:ajax 标记将在这里发挥作用，因为它将更新 facelet 上的所有组件，其 id 在render 属性中提供。因此，每次对任何h:selectOneRadio 执行某些操作时，以下代码都会更新其他组件。

<h:selectOneRadio id="encrypted" value="#{uploadFileBean.encryption}" onclick="radioSelect(this);">
   <f:selectItem itemLabel="Yes" itemValue="true"></f:selectItem>
   <f:selectItem itemLabel="No" itemValue="false"></f:selectItem>
   <f:ajax render="protected">
</h:selectOneRadio>
<h:selectOneRadio id="protected" value="#{uploadFileBean.fileprotected}">
   <f:selectItem itemLabel="Yes" itemValue="true"></f:selectItem>
   <f:selectItem itemLabel="No" itemValue="false"></f:selectItem>
   <f:ajax render="encrypted">
</h:selectOneRadio>

【讨论】：

请用文字说明问题和解决方法，不要把它变成一个本地化的搜索和查找游戏。
@BalusC 我没有在回答中提到这一点，因为我已经解释过在 cmets 中它需要在值更改后重新渲染组件。当 OP 要求我告诉我把 f:ajax 放在哪里时，我提供了代码。
评论可以删除。答案应该是自包含的。
@BalusC Quiet true，将更新我的答案并牢记在心。