title: Selecting another <h:selectOneRadio> from inside one <h:selectOneRadio>
body: <p>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.</p>
  
  <p>Here is the Javascript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    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";
  }
  
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>And here is the piece of code from my Facelet file:</p>
  
  <pre><code>&lt;h:selectOneRadio id="encrypted"
                  value="#{uploadFileBean.encryption}" onclick="radioSelect(this);"&gt;
                  &lt;f:selectItem itemLabel="Yes" itemValue="true"&gt;&lt;/f:selectItem&gt;
                  &lt;f:selectItem itemLabel="No" itemValue="false"&gt;&lt;/f:selectItem&gt;
              &lt;/h:selectOneRadio&gt;
  &lt;h:selectOneRadio id="protected"
                  value="#{uploadFileBean.fileprotected}"&gt;
                  &lt;f:selectItem itemLabel="Yes" itemValue="true"&gt;&lt;/f:selectItem&gt;
                  &lt;f:selectItem itemLabel="No" itemValue="false"&gt;&lt;/f:selectItem&gt;
              &lt;/h:selectOneRadio&gt;
  </code></pre>
  
  <hr>
  
  <p>Well When I am trying to write this JavaScript Function the Ajax Change is not working.</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
  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";
  }
  }
  &lt;/script&gt;
  </code></pre>