Tuesday 12 February 2019

Lightning Checkbox Identify Elements selected with Less Code


Lightning Component .cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<form>
    <fieldset>
        <legend> Select your favorite color:</legend>
            <lightning:input type="checkbox" label="red" name="color1" value="1" aura:id="colors" />
            <lightning:input type="checkbox" label="blue" name="color2" value="2" aura:id="colors" />
            <lightning:input type="checkbox" label="green" name="color3" value="3" aura:id="colors" />
        </fieldset>
        <lightning:button label="Submit" onclick="{!c.submitForm}" />
    </form>
</aura:component>

Lightning Component Controller.js

({
submitForm : function(component, event, helper) {
        var checkBoxElements = component.find("colors");
        // Get elements checked using below piece of code
        // myColor is the variable declared inside filter and scope will be with in filter
        // Filter method will return the array of elements checked
        const anyColor = checkBoxElements.filter(myColor => myColor.get("v.checked") === true);
        anyColor.forEach(function(element){
            alert(element.get("v.label"));
        });
}
})

No comments:

Post a Comment