Lightning CheckboxGroup

This articles explains how to get values dynamically in a lightning checkbox group.

Introduction

 

In this post, we will learn to build a Dynamic Lightning CheckBoxGroup in the Salesforce lightning platform. Using the lightning checkbox group, we will display multiple values with checkboxes. We will learn this concept in just three simple steps.

 

Step 1

 

Create a Lightning component from the developer console and save it.

 

Step 2

 

Here is the code for the component which displays the checkbox group:

<aura:component implements="force:lightningQuickActionWithoutHeader,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes"
                access="global" controller="CheckBoxGroupController" >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="options" type="List"/>
    <aura:attribute name="selectedVal" type="List"/>

    <div class="slds-box slds-theme_default">

     <lightning:checkboxGroup name="Checkbox Group"
                                 label="Checkbox Group"
                                 options="{! v.options }"
                                 value="{! v.selectedVal }"
                                 onchange="{! c.handleChange }"/>
    </div>

</aura:component>

Step 2

 

Now add controller.js and write the below code which will get record details:

({
    doInit: function(component, event, helper) {
        var action = component.get("c.AccDetails");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS"){
                var result = response.getReturnValue();
                var plValues = [];
                for (var i = 0; i < result.length; i++) {
                    plValues.push({
                        label: result[i].Name,
                        value: result[i].Id
                    });
                }
                component.set("v.options", plValues);
            }
        });
        $A.enqueueAction(action);
    },
   handleChange: function (component, event, helper) {
        //Get the Selected values
        var selectedValues = event.getParam("value");

        //Update the Selected Values
        component.set("v.selectedVal", selectedValues);
        },
})

Step 3

 

Create an Apex class that we use in component to get record values:

public class CheckBoxGroupController {
 @AuraEnabled
    public static List<Account> AccDetails() {
        List<Account> Acclist = [Select Id,Name from Account];
        Acclist.sort();
        return Acclist;
    }
}

Output

 

 

Our lightning checkbox group has been created!

 

Thanks.