+ Start a Discussion

Need radio buttons to have group of checkboxes



I have 6 checkboxes in VF page like below..


<apex:selectCheckboxes id="step1Options" value="{!step1}" onclick="hideAllTest()" layout="pageDirection" >
<apex:selectOption itemValue="AA1" itemLabel="AA1" />
<apex:selectOption itemValue="AA2" itemLabel="AA2" />
<apex:selectOption itemValue="AA3" itemLabel="AA3" />


<apex:selectOption itemValue="BB1" itemLabel="BB1" />
<apex:selectOption itemValue="BB2" itemLabel="BB2" />
<apex:selectOption itemValue="BB3" itemLabel="BB3" />


I have a requirement like i want 2 radio buttons and each radio button can include 3 checkboxes of the above( one radio button have AA group checkboxs and other is to have BB group checkboxes).


I want to display those 3 chexkboxes only on the selection of the radio button.


Can someone reply on how can we accomplish the above with some code snippets.


Thanks in advance.







Try the below code snippet as reference:


==================== Vf page=================

<apex:page controller="sampleCon" >

<apex:form >


function callactionfun()





    <apex:selectRadio value="{!country}" onchange="callactionfun()">

        <apex:selectOptions value="{!items}"/>


    <apex:actionFunction name="callfun" action="{!test}" rerender="out" status="status" />



    <apex:outputPanel id="out">

    <apex:actionstatus id="status" startText="testing...">

    <apex:facet name="stop">

    <apex:outputPanel >

    <p>You have selected:</p>

    <apex:outputText value="{!country}"/>




    <apex:selectCheckboxes id="step1Options"  onclick="hideAllTest()" layout="pageDirection" >

    <apex:selectOption itemValue="AA1" itemLabel="AA1" rendered="{!IF(country=='First',true,false)}"  />

    <apex:selectOption itemValue="AA2" itemLabel="AA2"  rendered="{!IF(country=='First',true,false)}" />

    <apex:selectOption itemValue="AA3" itemLabel="AA3"  rendered="{!IF(country=='First',true,false)}" />

    <apex:selectOption itemValue="BB1" itemLabel="BB1"  rendered="{!IF(country=='Last',true,false)}"  />

    <apex:selectOption itemValue="BB2" itemLabel="BB2"  rendered="{!IF(country=='Last',true,false)}"/>

    <apex:selectOption itemValue="BB3" itemLabel="BB3"  rendered="{!IF(country=='Last',true,false)}"  />







=========== Apex Controller================


public class sampleCon


 String country = 'First';

 public boolean chk{get;set;}

 public sampleCon()





    public PageReference test() {

        return null;



    public List<SelectOption> getItems() {

        List<SelectOption> options = new List<SelectOption>();

        options.add(new SelectOption('First','AAAA'));

        options.add(new SelectOption('Last','BBBBBBBBBBB'));

        return options;



    public String getCountry() {

        return country;



    public void setCountry(String country) { this.country = country; }



Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved.