Get selected checkbox values in JS controller

Nisar Ahmad April 01, 2019

Lightning Component :


<aura:component>
 <aura:attribute type="List" name="selectedCheckBoxes" default="[]" />
 <lightning:input type="checkbox" label="apps" name="apps" aura:id="apps" value="Apps" onchange="{! c.callCheckboxMethod }" />
 <lightning:input type="checkbox" label="product" name="product" aura:id="product" value="Product" onchange="{! c.callCheckboxMethod }" />    
 <lightning:input type="checkbox" label="service" name="service" aura:id="service" value="Service" onchange="{! c.callCheckboxMethod }" />
</aura:component>

Component Controller :


({
 callCheckboxMethod : function(component, event, helper) {      
  var capturedCheckboxName = event.getSource().get("v.value");
  var selectedCheckBoxes =  component.get("v.selectedCheckBoxes");
  if(selectedCheckBoxes.indexOf(capturedCheckboxName) > -1){            
   selectedCheckBoxes.splice(selectedCheckBoxes.indexOf(capturedCheckboxName), 1);           
  }
  else{
   selectedCheckBoxes.push(capturedCheckboxName);
  }
  component.set("v.selectedCheckBoxes", selectedCheckBoxes);
  alert('Selected--'+selectedCheckBoxes);
 }
})

Output :

Tags