+ Start a Discussion
anil Kumaranil Kumar 

Not able to select checkbox value in the lightning input tag

Hi All,

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. Is there anyway where we can read checkbox value by using lightning input tag.


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

Thanks,
Anil Kumar
Best Answer chosen by anil Kumar
anil Kumaranil Kumar
Hi All,

The issue has been resolved with the below changes.
<aura:attribute name="languages" type="Object[]" />

<aura:iteration items="{!v.languages}" var="lang">
   <lightning:input type="checkbox" value="{!lang.language}" label="{!lang.language}"  aura:id="boxPackLanguages" />
</aura:iteration>

JS Code:

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

Thanks,
Anil Kumar

All Answers

AnudeepAnudeep (Salesforce Developers) 
You don't need a value attribute with checkbox type input
 
<aura:component>
    <lightning:input type="checkbox" label="Basic option" name="input1"/>
    <lightning:input type="checkbox" label="Required option" name="input2" checked="true" required="true"/>
    <lightning:input type="checkbox" label="Disabled option" name="input3" checked="true" disabled="true"/>
</aura:component>

Can you try the suggestions in this post?
anil Kumaranil Kumar
Hi All,

The issue has been resolved with the below changes.
<aura:attribute name="languages" type="Object[]" />

<aura:iteration items="{!v.languages}" var="lang">
   <lightning:input type="checkbox" value="{!lang.language}" label="{!lang.language}"  aura:id="boxPackLanguages" />
</aura:iteration>

JS Code:

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

Thanks,
Anil Kumar
This was selected as the best answer