Check/Uncheck All Checkboxes in Lightning Component

//Apex Controller:- accListClass
public class accListClass
{
@AuraEnabled
public static wrapperClassAccnt getAccounts()
{
List<Account> accList= [SELECT Id,Name,Phone,Industry from Account Limit 10];
wrapperClassAccnt accntobj=new wrapperClassAccnt();
accntobj.lstaccnt=accList;
return accntobj;
}

// wrapper or Inner class with @AuraEnabled {get;set;} properties*
public class wrapperClassAccnt
{
@AuraEnabled
public List<Account> lstaccnt{get;set;}
}
}
//Lightning Component:- "accListComponent"
<aura:component controller="accListClass">
<aura:attribute name="counter" default="0" type="integer"/>
<aura:attribute name="accntTOTval" type="Integer" />
<aura:attribute name="accntDetails" type="object" />
<aura:handler name="init" value="{!this}" action="{!c.accountList}"></aura:handler>
<h1 ><b>Total Count:</b>{!v.counter}</h1>
<div class="slds-grid">

<div class="slds-col slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_5-of-6 slds-large-size_8-of-12">
</div>

<!--div class="slds-col slds-size_1-of-8 allBtn">

<lightning:button label="Delete Selected"
iconName="utility:delete"
iconPosition="left"
variant="destructive"
onclick="{!c.deleteSlctd}">
</lightning:button>
</div-->
</div>


<table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
<thead>
<tr class="slds-text-heading--label">
<th scope="row" style="width: 50px;" class="slds-text-align--right">
<ui:inputCheckbox aura:id="cbox" class="cBox" change="{!c.selectAll}"/></th>
<th scope="row"><div class="slds-truncate" title="ID">ID</div></th>
<th scope="row"><div class="slds-truncate" titile="NAME">Name</div></th>
<th scope="row"><div class="slds-truncate" title="INDUSTRY">Industry</div></th>
<th scope="row"><div class="slds-truncate" title="PHONE">Phone</div></th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.accntDetails.lstaccnt}" var="a">
<tr>
<td>
<ui:inputCheckbox aura:id="cboxRow" text="{!a.Id}" class="cBox" change="{!c.changeSelectAll}"/>
</td>
<th><div class="slds-truncate">{!a.Id}</div></th>
<td><div class="slds-truncate">{!a.Name}</div></td>
<td><div class="slds-truncate">{!a.Industry}</div></td>
<td><div class="slds-truncate">{!a.Phone}</div></td>
</tr>
</aura:iteration>
</tbody>
</table>
</aura:component>
//Controller.js

({

accountList : function(component, event, helper)
{
helper.getAccountList(component, event, helper);
},
selectAll: function(component,event, helper)
{
debugger;
var slctCheck = event.getSource().get("v.value");
var getCheckAllId = component.find("cboxRow");

if (slctCheck == true)
{
for (var i = 0; i < getCheckAllId.length; i++)
{
var chkval=component.find("cboxRow")[i].get("v.value");
if(chkval==false)
{
component.find("cboxRow")[i].set("v.value", true);
component.set('v.counter',component.get('v.counter')+1);
var TotcountVal=component.get('v.counter');
}
else
{
component.find("cboxRow")[i].set("v.value", true);
}

}
}
else
{
for (var i = 0; i < getCheckAllId.length; i++)
{
component.find("cboxRow")[i].set("v.value", false);
component.set('v.counter',component.get('v.counter')-1);
var TotcountVal=component.get('v.counter');
}
}
},
changeSelectAll:function(component,event, helper)
{
debugger;

var accntTOTval = component.get("v.accntTOTval"); //here get component Attributes Value.
var slctCheckRow = event.getSource().get("v.value");
var getCheckAllId = component.find("cbox");

if(slctCheckRow == false)
{
component.find("cbox").set("v.value", false);
component.set('v.counter',component.get('v.counter')-1); //Here use Counter --
var TotcountVal=component.get('v.counter');
}
else if(slctCheckRow == true)
{
component.set('v.counter',component.get('v.counter')+1); //Here use Counter ++
var TotcountVal=component.get('v.counter');
}
if(TotcountVal==accntTOTval)
{
component.find("cbox").set("v.value", true);
}

},
})
//Helper.JS

({
getAccountList : function(component, event, helper)
{
debugger;
var action = component.get("c.getAccounts");
action.setCallback(this, function(response)
{
debugger;
var state = response.getState();
if (state == "SUCCESS")
{
var accVal=response.getReturnValue();
var totval=accVal.lstaccnt.length;
component.set("v.accntTOTval", totval);
component.set("v.accntDetails", accVal);
}
});
$A.enqueueAction(action);
}
})
//Lightning Application:- "accListApplication"

<aura:application extends="force:slds" >
<c:accListComponent></c:accListComponent>
</aura:application>

Leave a Reply