0

I'm trying to achieve this markup:

<ul>
    <li><input type="radio" name="category" value="all" checked/><label>All</label></li>
    <li><input type="radio" name="category" value="answers"/><label>Answers</label></li>
    <li><input type="radio" name="category" value="ideas"/><label>Ideas</label></li>
    <li><input type="radio" name="category" value="groups"/><label>Groups</label></li>
</ul>

How would I do this using apex:SelectRadio buttons?

Thanks in advance!

0

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;
    }   
}
  • Sorry, I need to clarify: I am trying to replicate the markup so it gets populated like an unordered list. – slim Aug 19 '15 at 15:47
  • @slim I have updated the solution hope this helps. – Saroj Bera Aug 19 '15 at 19:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.