You need to sign in to do that
Don't have an account?
anil 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"> {!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
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"> {!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
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
Can you try the suggestions in this post?
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