Selecting another <h:selectOneRadio> from inside one <h:selectOneRadio>

Question

I am trying to make an Facelet on which there are two rows each containing two radio buttons are there. I want to make such that if first radio button is selected in first rows, the second radio button in second row should get selected and vice versa. I am trying to use JavaScript but still the changes are not reflected in the browser.

Here is the 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>

And here is the piece of code from my Facelet file:

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

---

Well When I am trying to write this JavaScript Function the Ajax Change is not working.

    <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

The JavaScript you've used is working perfectly also when you change the value its getting changed, however to reflect these changes on the facelet you need to update the component which is holding the value of you've changed.

The f:ajax tag will do the needful here, as it will update the all the components on the facelet whose id is provided in the render attribute. Hence the below code will update the other component each time some action is performed on any of the 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>