Hello Everyone, In this tutorial, you will see a lightning component example that shows you, how you can select multiple records in grid or table through the checkbox. In this example, I am query account records and bind the record list in a table with a checkbox along with a lightning button that holds functionality to delete selected account records on a single click. So let's get started

 Get checkbox checked value in Lightning Component

 Step 1: Login to your Salesforce Org. and open developer console. 

Step 2: Navigate to File | New | Apex Class and Create an Apex controller called AccountHandler. Replace following code in apex controller.

AccountHandler.apxc
 public class AccountHandler {
 @AuraEnabled
    public static List<Account> getAllAccount(){
        return [SELECT Id,Name,Phone FROM Account limit 5];
    }
    
    @AuraEnabled
    public static String delAccount(String[] lstAccountId){
        string msg='';
        List<Account> lstAcc=[SELECT Id FROM Account WHERE Id IN: lstAccountId];
        try{
            if(lstAcc.size()>0)
                delete lstAcc;
        }
        catch(Exception ex){
            msg=ex.getMessage()+'\n'+ex.getLineNumber()+'\n'+ex.getCause();
        }
        return msg;
    }
 }
Step 3: Navigate to File | New | Lightning Component and create a Lightning Component called DeleteCheckedAccount. Replace the following markup in the Lightning Component.

DeleteCheckedAccount.cmp 
 <aura:component controller="AccountHandler" implements="flexipage:availableForAllPageTypes" access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="AccountList" type="Account[]"/>
    <aura:attribute name="SelectedAccount" type="String[]"/>    
    <div class="slds-page-header">
        <div class="slds-page-header__row">
            <div class="slds-page-header__col-title">
                <div class="slds-media">
                    <div class="slds-media__figure">
                        <lightning:icon iconName="standard:customers" alternativeText="Event" />
                    </div>
                    <div class="slds-media__body">
                        <div class="slds-page-header__name">
                            <div class="slds-page-header__name-title">
                                <h1>
                                    <span class="slds-page-header__title slds-truncate" title="Rohde Corp - 80,000 Widgets">Select Account to Delete</span>
                                </h1>
                            </div>
                        </div>
                        <p class="slds-page-header__name-meta">Delete Selected Account</p>
                    </div>                    
                </div>                
            </div>
        </div>
    </div>    
    <table class="slds-table slds-table_bordered">
        <thead>
            <tr>              
                <th></th>
                <th>Sr. No.</th>
                <th>Account Name</th>
                <th>Phone</th>                
            </tr>
        </thead>
        <tbody>
            <aura:iteration items="{!v.AccountList}" var="acc" indexVar="i">
                <tr>                    
                    <td>
                        <!--<ui:inputCheckbox text="{!acc.Id}" aura:id="chk" change="{!c.getSelectedAccount}"/>-->
                        <div class="slds-checkbox">
                            <input type="checkbox" name="chk" id="{!acc.Id}" onchange="{!c.getSelectedAccount}"/>                            
                            <label class="slds-checkbox__label" for="{!acc.Id}">
                                <span class="slds-checkbox_faux"></span>                                
                            </label>
                        </div>
                    </td>
                    <td>{!i+1}</td>
                    <td>{!acc.Name}</td>
                    <td>{!acc.Phone}</td>
                </tr>
            </aura:iteration>
        </tbody>
    </table><br/>
    <center>
        <lightning:button variant="success" label="Delete" title="Delete" onclick="{!c.deleteAccount}"/>        
    </center>
 </aura:component>
DeleteCheckedAccountController.js 
 ({
    doInit : function(component, event, helper) {
        helper.getAccounts(component);
    },
    
    getSelectedAccount : function(component, event,helper) { 
        var selectedId='';
        //when using <ui:inputCheckbox> instead html checkbox
        //selectedId=event.getSource().get("v.text");                
        selectedId = event.target.getAttribute('id');
        if(document.getElementById(selectedId).checked && component.get("v.SelectedAccount").indexOf(selectedId) < 0)
            component.get('v.SelectedAccount').push(selectedId);
        else{
            var index = component.get("v.SelectedAccount").indexOf(selectedId);
            if (index > -1) {
                component.get("v.SelectedAccount").splice(index, 1); 
            }
        }
    },
    
    deleteAccount:function(component,event,helper){
        var selectedAccount=component.get("v.SelectedAccount");
        if(selectedAccount.length>0){
            helper.deleteAcc(component,selectedAccount);
        }
        else{
            alert('please select account to delete.')
        }
    },
 }) 
DeleteCheckedAccountHelper.js 
 ({
 getAccounts : function(component) {
  var action=component.get("c.getAllAccount");
        action.setCallback(this,function(e){
            if(e.getState()=='SUCCESS'){
                var result=e.getReturnValue();                
                if(result.length>0){
                    component.set("v.AccountList",result);
                }
            }
        });
        $A.enqueueAction(action);
    },
    
    deleteAcc:function(component,selectedAccount){
        var action=component.get("c.delAccount");
        action.setParams({
            lstAccountId:selectedAccount
        });
        action.setCallback(this,function(e){
            if(e.getState()=='SUCCESS'){
                var result=e.getReturnValue();
                if(result!=''){
                    alert(result);
                }
                else{
                    this.getAccounts(component);
                    alert('Account deleted successfully');                    
                }
            } 
        });
        $A.enqueueAction(action);
    }
 })

Output:


 See also:

Conclusion:
Hope you like this tutorial, for any query or suggestions please feel free to comment.
Thank you.