Tag Archives: Checkbox Options

Checkbox Options in Salesforce

Visualforce Page:

<apex:page controller="SampleController">
    <apex:form>
        <!--Country Checkboxes-->
        <apex:selectCheckboxes value="{!countries}">
            <!--Country List-->
            <apex:selectOptions value="{!CountryList}"/>
        </apex:selectCheckboxes><br/>
        <apex:commandButton value="Submit" action="{!getSelectedCountries}" rerender="out" status="status"/>
    </apex:form>
    <!--Selected Countries Output-->
    <apex:outputPanel id="out">
        <apex:actionstatus id="status" startText="Loading...">
            <apex:facet name="stop">
                <apex:outputPanel>
                    <p>Selected Countries:</p>
                    <apex:dataList value="{!countries}" var="c">{!c}</apex:dataList>
                </apex:outputPanel>
            </apex:facet>
        </apex:actionstatus>
    </apex:outputPanel>
</apex:page>

Apex Class:

public class SampleController {
    
    Public List<string> countries {get;set;}
    
    public SampleController(){
        countries = new List<string>();
    }
    
    public List<SelectOption> getCountryList() {
        List<SelectOption> options = new List<SelectOption>();
        options.add(new SelectOption('USA','USA'));
        options.add(new SelectOption('INDIA','India'));
        options.add(new SelectOption('CANADA','Canada'));
        options.add(new SelectOption('MEXICO','Mexico'));
        return options;
    }
    
    public pagereference getSelectedCountries(){
        system.debug('selectedcountries -' + countries);
        return null;
    }
}

Output:

To display checkbox options in vertical direction, use layout property layout="pageDirection" in selectCheckboxe component.

<apex:selectCheckboxes value="{!countries}" layout="pageDirection">
    <apex:selectOptions value="{!CountryList}"/>
</apex:selectCheckboxes>