從一個內部選擇另一個<h：selectOneRadio><h：selectOneRadio>

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函數阿賈克斯更改不起作用。

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