0

We are trying to get selected checkbox value in the JS controller but selected values as coming as boolean values (True) instead of value. If we use ui namespace tag values are coming but lightning input tag is not working. we also tried with lightning:checkboxGroup it is not working inside aura iteration.

<aura:attribute name="languages" type="Object[]" />

<aura:iteration items="{!v.languages}" var="lang">
    <fieldset class="slds-form--compound">
        <form class="slds-form--inline">
            <div class="slds-form-element__control">
                <div class="slds-form-element__control">
                    <lightning:input type="checkbox" value="{!lang.language}" aura:id="boxPackLanguages" />

                    <!--<ui:inputCheckbox text="{!lang.language}" value="{!lang.isSelected}" aura:id="boxPackLanguages"  change="{!c.uncheckSelectAllLanguages}"  />-->
                </div>
                <label class="slds-form-element__label" for="text-input-01">&nbsp; {!lang.language}</label>
            </div>
        </form>
    </fieldset>
</aura:iteration>
<button class="slds-button slds-button--neutral" onclick="{!c.saveAndCreate}"><span>Save </span></button>

JS Code

 saveAndCreate: function(component, event, helper) {

     var languagesSelected = false;
     var languages = [];
     var getAllLanguages = component.find("boxPackLanguages");

     if (getAllLanguages != null) {

       languagesSelected = true;
       languages.push(getAllLanguages.get("v.value"));

       console.log('Slected Value' + languages);
     }
2

In your current code, getAllLanguages is an array of all the lightning:input (checkbox) controls. value property exists for the input control and you should be calling get("v.value") on each element of this array, but instead you are using it directly on the array (this is incorrect). Correct code snippet is given below:

saveAndCreate: function(component, event, helper) {

    var languagesSelected = false;
    var getAllLanguages = component.find("boxPackLanguages");
    var languages = [];
    
    for (var i=0; i<getAllLanguages.length; i++) {
        if (getAllLanguages[i].get("v.checked")) {
            languagesSelected = true;
            languages.push(getAllLanguages[i].get('v.value'));
        }
    }
    console.log('Selected Value' + languages.join(', '));
}

Also, in the HTML, you don't need a separate label element. Instead, you can use the snippet below.

<lightning:input type="checkbox" value="{!lang.language}" label="{!lang.language}" aura:id="boxPackLanguages" />
1
  • Hi Arut, Issue has been resolved. Thank you so much for the response. Thanks, Anil Kumar
    – Anil Kumar
    Nov 9 '20 at 13:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.