Post
Ask Question

Lightning CheckboxGroup

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:
  1. <aura:component implements="force:lightningQuickActionWithoutHeader,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes"    
  2.                 access="global" controller="CheckBoxGroupController" >    
  3.     <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>       
  4.     <aura:attribute name="options" type="List"/>    
  5.     <aura:attribute name="selectedVal" type="List"/>    
  6.         
  7.     <div class="slds-box slds-theme_default">    
  8.     
  9.      <lightning:checkboxGroup name="Checkbox Group"    
  10.                                  label="Checkbox Group"    
  11.                                  options="{! v.options }"    
  12.                                  value="{! v.selectedVal }"    
  13.                                  onchange="{! c.handleChange }"/>    
  14.     </div>    
  15.         
  16. </aura:component>   
Step 2
 
Now add controller.js and write the below code which will get record details:
  1. ({    
  2.     doInit: function(component, event, helper) {    
  3.         var action = component.get("c.AccDetails");    
  4.         action.setCallback(this, function(response) {    
  5.             var state = response.getState();    
  6.             if (state === "SUCCESS"){    
  7.                 var result = response.getReturnValue();    
  8.                 var plValues = [];    
  9.                 for (var i = 0; i < result.length; i++) {    
  10.                     plValues.push({    
  11.                         label: result[i].Name,    
  12.                         value: result[i].Id    
  13.                     });    
  14.                 }    
  15.                 component.set("v.options", plValues);    
  16.             }    
  17.         });    
  18.         $A.enqueueAction(action);    
  19.     },    
  20.    handleChange: function (component, event, helper) {    
  21.         //Get the Selected values       
  22.         var selectedValues = event.getParam("value");    
  23.              
  24.         //Update the Selected Values      
  25.         component.set("v.selectedVal", selectedValues);    
  26.         },    
  27. })    
Step 3
 
Create an Apex class that we use in component to get record values:
  1. public class CheckBoxGroupController {  
  2.  @AuraEnabled  
  3.     public static List<Account> AccDetails() {  
  4.         List<Account> Acclist = [Select Id,Name from Account];         
  5.         Acclist.sort();  
  6.         return Acclist;  
  7.     }  
  8. } 
Output
 
 
Our lightning checkbox group has been created!
 
Thanks.