Multiple Radio Button are getting Selected while Using with <apex:repeat>

Question

I am trying to create Radio Button using <apex:repeat> and in {!recordList} i have 7 records so it will create 7 Radio Buttons. But the problem is that all 7 Buttons are getting Selected and i want only one at a time. Someone told me that you can use <apex:repeat> after <apex:selectRadio so radio list will be one 1 and have 7 options but in that case what will be the value of <apex:selectRadio>because i need this Id to perform some functioning

VF Page

<apex:repeat value="{!recordList}" var="rep">
    <apex:selectRadio id="isRadio" value="{!rep.isSelected}">
        <apex:selectOptions value="{!items}" />
    </apex:selectRadio>
</apex:repeat>

Controller

public List<SelectOption> getItems() {
        List<SelectOption> options = new List<SelectOption>();
        options.add(new SelectOption('true',''));
        return options;
    }

Answer 1

Each apex:radioGroup is a unique record group. You can select all of them because they separate radio groups. In other words, you're expecting code like the following:

<input type="radio" name="group1" />
<input type="radio" name="group1" />
...

But what you're really getting is:

<input type="radio" name="group1" />
<input type="radio" name="group2" />
...

This allows all of them to be selected.

---

If you need just one group, you need to use some JavaScript. That said, the JS you need is only used to associate the inputs to a bound input value:

    <script>
    function updateHidden(event) {
        document.querySelector("[id$=selectedValue]").value = event.target.value;
        console.log(event.target.value);
    }
    </script>
    <apex:inputHidden value="{!selectedValue}" id="selectedValue" />
    <apex:repeat value="{!recordList}" var="rep">
        <input name="isRadio" type="radio" onchange="updateHidden(event)" value="{!rep.value}" label="{!rep.value}" />
    </apex:repeat>

</apex:form>

This should give you the functionality you need with various non-standard layouts.

Answer 2

Use Input Tag for Radio Button as shown below

<td>
  <input name="isRadio" type="radio" value="{!rep.Id}" /><br/>
</td>

Click here to see Implementation of Radio Button

Answer 3

You can create a javascript function to make sure only one radio button is selected at a time. This works for checkboxes, I haven't tried it with radio buttons

function deselectOtherBoxes(selectedBox){

        if(selectedBox.checked){

            var allBoxes = document.getElementsByClassName('myclass');

            for (let i = 0; i < allBoxes.length; i++) {

                if (allBoxes[i].checked) {
                    allBoxes[i].checked = false;
                }        
            }
            selectedBox.checked = true;
        }
    }

Then you can call it this way

<apex:column >
    <apex:facet name="header">Select</apex:facet>
     <apex:inputCheckbox value="{!con.selected}" onchange="deselectOtherBoxes(this)"/>
 </apex:column>