0

I would like to store selected checkbox values in the array.If user selects apps, product and service then I have to store [apps, product, service]

If users select the Apps, product my array value has to contain [Apps, Product]

        <aura:component implements="forceCommunity:availableForAllPageTypes,flexipage:availableForAllPageTypes" controller="S360_ListingsFilterController">
   <aura:attribute name="options" type="Object[]"/>
     <c:S360_MultiSelectCheckboxComponent CompId="CategoryId" 
      picklistValues="{!v.options}"  GroupLabel="Category"/>
      </aura:component>

 <aura:component controller="PicklistDescriber">
<aura:attribute name="CompId" type="string" default=""/>
<aura:attribute name="GroupLabel" type="string" default=""/>
<aura:attribute name="IsHidden" type="boolean" default="false"/>
<aura:attribute name="IsRequired" type="boolean" default="false"/>
<aura:attribute name="IsDisabled" type="boolean" default="false"/>
<aura:attribute name="Items" type="Object[]" default="[]"/>
<aura:attribute name="DefaultK" type="string" default="All"/>
<aura:attribute name="DefaultValue" type="Object[]" default="[]" description="private attribute"/>
<aura:attribute name="picklistKV" type="Object[]" default="[]"/>
<aura:attribute name="picklistValues" type="Object[]" default="[]"/>
<aura:attribute name="SObjectName" type="string" default=""/>
<aura:attribute name="recordTypeName" type="string" default=""/>
<aura:attribute name="FieldName" type="string" default=""/>    

<aura:registerEvent name="OnChange" type="c:OnChange" />

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<!-- handler clicked checkbox -->
<aura:handler name="OnClick" event="c:OnClick" action="{!c.handleOnClick}"/>

<!--Event Handler-->
<aura:handler event="c:NotifyPicklistCmp" action="{!c.handleNotify}" />

<!-- define methods -->
<aura:method name="invalidatePicklist" action="{!c.methodHandleNotify}" access="public" 
             description="method to invalidate picklist comp"/>
<aura:method name="getDefaultValue" action="{!c.methodHandleGetDefaultValue}" access="public"/>

<div class="{!v.IsHidden ? 'slds-hide slds-is-relative' : 'slds-show slds-form-element slds-is-relative'}">
    <legend class="slds-form-element__legend slds-form-element__label">
        <abbr class="{!v.IsRequired ? 'slds-required slds-show' : 'slds-hide'}" title="required">*</abbr>
        {!v.GroupLabel}
    </legend>
    <div class="slds-form-element__control">
        <aura:iteration items="{!v.picklistValues}" var="item">
            <!--  <p> compiD:{!!v.CompId}</p>
            <P>Item label:{!item.label}</P> -->
            <c:S360_CheckboxInline CompId="{!v.CompId+'#'+item.label}" InputLabel="{!item.label}" IsChecked="{!item.isChecked}" IsDisabled="{!v.IsDisabled}"/>
        </aura:iteration>
    </div>

</div>

  <aura:component >
<aura:attribute name="CompId" type="string" default="CheckboxId"/>
<aura:attribute name="InputLabel" type="string" default="Checkbox Label"/>
<aura:attribute name="IsHidden" type="boolean" default="false"/>
<aura:attribute name="IsRequired" type="boolean" default="false"/>
<aura:attribute name="IsDisabled" type="boolean" default="false"/>
<aura:attribute name="IsChecked" type="boolean" default="false"/>
<aura:attribute name="InputClass" type="String" default=""/>

<!-- additional event registration -->
<aura:registerEvent name="OnClick" type="c:OnClick" />
<aura:registerEvent name="simple" type="c:simpleEvent"/>


<div class="slds-form-element__control">
    <!--ui:inputCheckbox click="{!c.onClick}" value="{!v.IsChecked}" class="slds-input"/-->
    <span class="slds-checkbox">

        <abbr class="{!v.IsRequired ? 'slds-show slds-required' : 'slds-hide'}" title="required">*</abbr>
        <input type="checkbox" name="options" id="{!v.CompId}" checked="{!v.IsChecked}" disabled="{!v.IsDisabled}" 
               onclick="{!c.onClick}" aura:id="checkbox" class="{!v.InputClass}"/>
        <label class="slds-checkbox__label" for="{!v.CompId}">  
            <span class="slds-checkbox--faux"></span>
            <!--span class="slds-form-element__label"> {!v.InputLabel}</span-->
        </label>

        <label class="{!(v.InputLabel == '' ? 'slds-hide slds-is-relative' : 'slds-form-element__label')}" for="{!v.CompId}">
            <abbr class="{! 'slds-required ' + (v.IsRequired ? 'slds-show' : 'slds-hide')}" title="required">*</abbr>
            {!v.InputLabel}   
        </label>

    </span>
</div>

Javscript:

     ({
    onClick : function(component, event, helper) {
    var labelvalue=component.get("v.InputLabel");
    alert('label value @@@'+labelvalue);
   var evt = $A.get("e.c:simpleEvent");
    evt.setParams({
        "InputLabel": labelvalue
    });
    evt.fire();

 component.set('v.IsChecked', !component.get('v.IsChecked'));
    var event = component.getEvent('OnClick');
    event.setParams({
        "CompId": component.get('v.CompId'),
        "payload": component.get('v.IsChecked')
    });
    event.fire();

},

})

enter image description here enter image description here

1
  • What problem are you facing, how are you attempting to do so?
    – glls
    Dec 24, 2017 at 2:15

1 Answer 1

5

You can achieve it easily.

Component: here you can have three lightning check boxes having values Apps, Product and Service. On every check box, we can associate the method " callCheckboxMethod" which will be called whenever check box gets checked or unchecked. This method will maintain the list of selected check boxes in attribute " selectedCheckBoxes" which is a list type.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<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>

Controller: Here we are first getting that check box's value which was checked or unchecked by using " event.getSource().get("v.value")".

Then we can identify whether this value is present or not in our list " selectedCheckBoxes". If it is not present then it means user marked from "unchecked" to "checked", in this case we are pushing into the list using " selectedCheckBoxes.push(capturedCheckboxName);". Else we are popping out the checbox value from list( "checked" to "unchecked" case) using splice method of JavaScript.

({
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);
}
})

Please do let me know if you face any difficulty.

5
  • Please check myupdated code ..i dont want new code...i need result in that code itself Dec 23, 2017 at 14:39
  • Armpit, do you mind explaining how to do this rather than dumping code
    – glls
    Dec 23, 2017 at 15:25
  • Updated the answer with explaination. Hope it helps.Sorry if there is any typo since traveling and typing with mobile. Dec 24, 2017 at 0:30
  • Please check my code and try to answer it..i dont want general answer..Iam asking for specific answer @ArpitSethi Dec 24, 2017 at 4:21
  • I am passing picklist values to "S360_MultiSelectCheckboxComponent" and again im passing to <aura:iteration items="{!v.picklistValues}" var="item"> <!-- <p> compiD:{!!v.CompId}</p> <P>Item label:{!item.label}</P> --> <c:S360_CheckboxInline CompId="{!v.CompId+'#'+item.label}" InputLabel="{!item.label}" IsChecked="{!item.isChecked}" IsDisabled="{!v.IsDisabled}"/> </aura:iteration> Dec 24, 2017 at 4:23

Not the answer you're looking for? Browse other questions tagged .