从一个内部选择另一个

Question

我正在试图制作一个Facelet，其中有两行，每行都包含两个单选按钮。我想这样做，如果第一行中选择第一个单选按钮，第二行中的第二个单选按钮应该被选中，反之亦然。我正在尝试使用JavaScript，但仍然没有在浏览器中反映这些更改。从一个内部选择另一个<h：selectOneRadio><h：selectOneRadio>

这里是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函数阿贾克斯更改不起作用。

<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>