Datatable radiobutton issue

Question

Hi I have a page with multiple datatables that are shown based on some condition. At any given point only on edatatable is visisble and the rest are hidden. I have radiobuttons in one of the columns. The problem is that radio button selection is not working properly. The problem is selecting one radio button does not unselect the previously selected button: Here is the javascript I have:
<script>
                    function dataTableSelectOneRadio(radio) {
                         var id = radio.name.substring(radio.name.lastIndexOf(':'));
                         var el = radio.form.elements;
                         for (var i = 0; i < el.length; i++) {
                              if (el.name.substring(el[i].name.lastIndexOf(':')) == id) {
                                   el[i].checked = false;
                         radio.checked = true;
               </script>
Here is the partial jsp code:
<h:dataTable value="#{reqbean.listOne}"
                                     var="varlistOne" border="0"
                                     id="table1" width="777"
                                     headerClass="header"
                                     rowClasses="evenRow, oddRow"
                                     columnClasses="firstColumn,secondColumn,thirdColumn"
                                     binding="#{reqbean.dataTable1}"
                                     rendered="#{reqbean.flagBtn}">
                          <h:column>                           
                            <h:selectOneRadio valueChangeListener="#{reqbean.setSelectedItem}" onchange="dataTableSelectOneRadio(this);"><f:selectItem itemValue="null" /></h:selectOneRadio>
                          </h:column>
                                Some more columns
                        </h:dataTable>
                        <h:dataTable value="#{reqbean.listTwo}"
                                     var="varlistTwo" border="0" id="table2"
                                     headerClass="header" width="777"
                                     rowClasses="evenRow, oddRow"
                                     columnClasses="firstColumn,secondColumn,thirdColumn"
                                     binding="#{reqbean.dataTable2}"
                                     rendered="#{reqbean.flagBtn2}">
                          <h:column>
                            <h:selectOneRadio valueChangeListener="#{reqbean.setSelectedItem}" onchange="dataTableSelectOneRadio(this);"><f:selectItem itemValue="null" /></h:selectOneRadio>
                          </h:column>
                                Some more columns
                        </h:dataTable>Thanks

Answer 1

Do you understand what the Javascript is doing? Check the client ID's of your form and radio button elements in the HTML source.