Question

我正在尝试制作一个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>

Answer 1

当您更改其变化的值时，您使用的JavaScript也能正常工作，但要在facelet上反映这些更改，您需要更新保持您已更改的值的组件。

f:ajax标记将在此处完成所需，因为它将更新在render属性中提供了ID的facelet上的所有组件。因此，以下代码将在每次对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>

从一个<h：selectoneradio>中选择另一个<h：selectoneradio> </h：selectoneradio> </h：selectoneradio>

1 个答案: