You can do like this. Hope this helps.
VF page code
<apex:selectRadio value="{!searchCategory}" >
<apex:selectOption itemValue="Member" itemlabel="Member"/>
<apex:selectOption itemValue="Blog" itemlabel="Blog"/>
<apex:selectOption itemValue="Photo" itemlabel="Photo"/>
</apex:selectRadio>
Controller code
public String searchCategory;
public String getsearchCategory() {
return searchCategory;
}
public void setsearchCategory(String searchCategory) {
this.searchCategory = searchCategory;
}
Source :- http://www.infallibletechie.com/2012/07/radio-button-in-salesforce.html
Updated solution
To keep the same HTML structure as in the question, We can use <apex:repeat
in combination of <ul>
<li>
tags. I have used <apex:inputHidden
tag and JavaScript function to track the selected radio value. Here is a updated version of the code. Hope this helps.
VF page
<apex:page showHeader="true" sidebar="true" controller="RadioTestController">
<apex:form>
<ul>
<apex:repeat value="{!myList}" var="option">
<li>
<input name="rdoname" id="num_{!option}" type="radio" value="{!option}" onclick="saveOptionJS(this,'{!$Component.RadioButtonValue}');" />
<label for="num_{!option}">{!option}</label>
</li>
</apex:repeat>
</ul>
<apex:inputHidden value="{!searchCategory}" id="RadioButtonValue" />
</apex:form>
<script type="text/javascript">
function saveOptionJS(input, txtid){
document.getElementById(txtid).value= input.value;
}
</script>
</apex:page>
Controller
public with sharing class RadioTestController {
Public List<String> myList{get;set;}
public RadioTestController() {
myList = new List<String>();
myList.add('Member');
myList.add('Blog');
myList.add('Photo');
}
public String searchCategory;
public String getsearchCategory() {
return searchCategory;
}
public void setsearchCategory(String searchCategory) {
this.searchCategory = searchCategory;
}
}