+ Start a Discussion
Mhlangano KhumaloMhlangano Khumalo 

How to render multiselect picklists as checkboxes on a visualforce page

I have a custom object (standardController="Benchmarking__c"), I created a multi select picklist with values London, Tokyo & LA. I would like these values  to appear as checkboxes on the Visualforce page.

<apex:inputField value="{!Benchmarking_Result__c.Select_Cities__c}"/>
 
sandeep sankhlasandeep sankhla
Hi Mhlangano,

If you will use inputfield then it will come as multipicklist only as it's datatype is multipicklist not checkbox...in Vf page controller you can get the values from multipicklist and then you can show them as a checkbox in Vf page without inputfield..

P.S. If my answer helps you to solve your problem please mark it as best answer. It will help other to find best answer.

Thanks,
Sandeep
Salesforce Certified Developer 
Vivek_PatelVivek_Patel
Hi Mhlangano,

Here is a sample code which shows pliclist values of Language field on a custom object Employee as checkboxes on the VF page and then read back the selection in the controller.

 
<apex:page controller="TestController">
<apex:form>
<apex:pageBlock>
    <apex:dataTable value="{!PicklistValues}" var="wrapper">
        <apex:column>
            {!wrapper.value}
            <apex:inputCheckbox value="{!wrapper.isSelected}" />
        </apex:column>
    </apex:dataTable>
    <apex:pageblockButtons>
        <apex:commandButton action="{!showValues}" value="Show data"/>
    </apex:pageblockButtons>
</apex:pageBlock>
</apex:form>
</apex:page>
 
public class TestController {

    public class PicklistWrapper {
        public String value {get;set;}
        public Boolean isSelected {get;set;}
        
        public PicklistWrapper(String value, Boolean isSelected) {
            this.value = value;
            this.isSelected = isSelected;
        }
    }
    
    List<PicklistWrapper> picklistValues{get;set;}
    
    public List<PicklistWrapper> getPicklistValues() {
       picklistValues = new List<PicklistWrapper>();    
       Schema.DescribeFieldResult fieldResult = Employee__c.Languages__c.getDescribe();
       List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues();
        
       for( Schema.PicklistEntry f : ple)
       {
           picklistValues.add(new PicklistWrapper(f.getLabel(), false));
       }       
       return picklistValues;
    }
    
    public PageReference showValues() {
        for(PicklistWrapper wrapper : picklistValues) {
            System.debug(wrapper.value + '--->'+wrapper.isSelected);
        }
        return null;
    }
}

You can modify this as per you need or design.

Regards,
Vivek Patel.

Please mark this as resolved if this answers your query, this will help others find the correct answers.