+ Start a Discussion
SurenderSurender 

Need radio buttons to have group of checkboxes

Hi,

 

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" />
</apex:selectCheckboxes>

 

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.

 

 

 

 

Navatar_DbSupNavatar_DbSup

Hi,

Try the below code snippet as reference:

 

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

<apex:page controller="sampleCon" >

<apex:form >

<script>

function callactionfun()

{

    callfun();

}

</script>

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

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

    </apex:selectRadio><p/>

    <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:outputPanel>

    </apex:facet>

    </apex:actionstatus>

    <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:selectCheckboxes>

    </apex:outputPanel>

    </apex:form>

</apex:page>

 

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

 

public class sampleCon

{

 String country = 'First';

 public boolean chk{get;set;}

 public sampleCon()

 {

     chk=true;

 }

        

    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.