You need to sign in to do that
Don't have an account?
sandhya santhanagopalan
how to save array of input checkbox value in lightning component
I want to fetch all the selected checkbox from UI using java script in my lightning component.My controller code is showing error.I am also pasting my controller and component code, and also the screen shot of UI.Kindly help.Thanks in advance.
MVendorGroup: function(component, event, helper) {
var checkboxes = event.getSource("checkbox").get("v.value");
var checkboxesChecked = [];
for (var i=0; i<checkboxes.length; i++) {
// And stick the checked ones onto an array...
if (checkboxes[i].checked) {
checkboxesChecked.push(checkboxes[i]);
}
}
var action = component.get("this.checkboxesChecked");
action.setCallback(this, function(reponse){
if(reponse.getState() === "SUCCESS"){
var repActu = reponse.getReturnValue();
component.set("v.vendorDetails.MinorityVendor__c", repActu);
}
}
$A.enqueueAction(action);
}
component code is something like this
<div class="slds-col slds-form-element slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_5-of-6 slds-large-size_4-of-12">
<lightning:input aura:id="checkbox" type="checkbox" label="Small Business" name="mVendor" value="{!v.vendorDetails.MinorityVendor__c}" onchange="{!c.MVendorGroup}"/>
</div>
<div class="slds-col slds-form-element slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_5-of-6 slds-large-size_4-of-12">
<lightning:input aura:id="checkbox" type="checkbox" label="Large Business" name="mVendor" value="{!v.vendorDetails.MinorityVendor__c}" onchange="{!c.MVendorGroup}"/>
</div>
<div class="slds-col slds-form-element slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_5-of-6 slds-large-size_4-of-12">
<lightning:input aura:id="checkbox" type="checkbox" label="Historically Black College or University/Minority Institution" name="mVendor" value="{!v.vendorDetails.MinorityVendor__c}" onchange="{!c.MVendorGroup}"/>
</div>
<div class="slds-col slds-form-element slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_5-of-6 slds-large-size_4-of-12">
<lightning:input aura:id="checkbox" type="checkbox" label="Hub Zone" name="mVendor" value="{!v.vendorDetails.MinorityVendor__c}" onchange="{!c.MVendorGroup}"/>
</div>
<div class="slds-form-element slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_5-of-6 slds-large-size_4-of-12">
<lightning:input aura:id="checkbox" type="checkbox" label="Minority Business (Applies only to non-Federal jobs)" name="mVendor" value="{!v.vendorDetails.MinorityVendor__c}" onchange="{!c.MVendorGroup}"/></div>
<div class="slds-form-element slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_5-of-6 slds-large-size_4-of-12">
<lightning:input aura:id="checkbox" type="checkbox" label="Native American Small Business or Native Hawaiian Corporation (Small)" name="mVendor" value="{!v.vendorDetails.MinorityVendor__c}" onchange="{!c.MVendorGroup}"/>
</div>
<div class="slds-form-element slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_5-of-6 slds-large-size_4-of-12">
<lightning:input aura:id="checkbox" type="checkbox" label="Javis-Wagner-O'Day" name="mVendor" value="{!v.vendorDetails.MinorityVendor__c}" onchange="{!c.MVendorGroup}"/></div>
<div class="slds-form-element slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_5-of-6 slds-large-size_4-of-12">
<lightning:input aura:id="checkbox" type="checkbox" label="Service Disabled Veteran Owned Small Business" name="mVendor" value="{!v.vendorDetails.MinorityVendor__c}" onchange="{!c.MVendorGroup}"/></div>
<div class="slds-form-element slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_5-of-6 slds-large-size_4-of-12">
<lightning:input aura:id="checkbox" type="checkbox" label="Veteran Owned Small Business" name="mVendor" value="{!v.vendorDetails.MinorityVendor__c}" onchange="{!c.MVendorGroup}"/></div>
<div class="slds-form-element slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_5-of-6 slds-large-size_4-of-12">
<lightning:input aura:id="checkbox" type="checkbox" label="Small Disadvantaged Business or 8(a)" name="mVendor" value="{!v.vendorDetails.MinorityVendor__c}" onchange="{!c.MVendorGroup}"/></div>
<div class="slds-form-element slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_5-of-6 slds-large-size_4-of-12">
<lightning:input aura:id="checkbox" type="checkbox" label="Women Owned Small Business" name="mVendor" value="{!v.vendorDetails.MinorityVendor__c}" onchange="{!c.MVendorGroup}"/>
MVendorGroup: function(component, event, helper) {
var checkboxes = event.getSource("checkbox").get("v.value");
var checkboxesChecked = [];
for (var i=0; i<checkboxes.length; i++) {
// And stick the checked ones onto an array...
if (checkboxes[i].checked) {
checkboxesChecked.push(checkboxes[i]);
}
}
var action = component.get("this.checkboxesChecked");
action.setCallback(this, function(reponse){
if(reponse.getState() === "SUCCESS"){
var repActu = reponse.getReturnValue();
component.set("v.vendorDetails.MinorityVendor__c", repActu);
}
}
$A.enqueueAction(action);
}
component code is something like this
<div class="slds-col slds-form-element slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_5-of-6 slds-large-size_4-of-12">
<lightning:input aura:id="checkbox" type="checkbox" label="Small Business" name="mVendor" value="{!v.vendorDetails.MinorityVendor__c}" onchange="{!c.MVendorGroup}"/>
</div>
<div class="slds-col slds-form-element slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_5-of-6 slds-large-size_4-of-12">
<lightning:input aura:id="checkbox" type="checkbox" label="Large Business" name="mVendor" value="{!v.vendorDetails.MinorityVendor__c}" onchange="{!c.MVendorGroup}"/>
</div>
<div class="slds-col slds-form-element slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_5-of-6 slds-large-size_4-of-12">
<lightning:input aura:id="checkbox" type="checkbox" label="Historically Black College or University/Minority Institution" name="mVendor" value="{!v.vendorDetails.MinorityVendor__c}" onchange="{!c.MVendorGroup}"/>
</div>
<div class="slds-col slds-form-element slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_5-of-6 slds-large-size_4-of-12">
<lightning:input aura:id="checkbox" type="checkbox" label="Hub Zone" name="mVendor" value="{!v.vendorDetails.MinorityVendor__c}" onchange="{!c.MVendorGroup}"/>
</div>
<div class="slds-form-element slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_5-of-6 slds-large-size_4-of-12">
<lightning:input aura:id="checkbox" type="checkbox" label="Minority Business (Applies only to non-Federal jobs)" name="mVendor" value="{!v.vendorDetails.MinorityVendor__c}" onchange="{!c.MVendorGroup}"/></div>
<div class="slds-form-element slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_5-of-6 slds-large-size_4-of-12">
<lightning:input aura:id="checkbox" type="checkbox" label="Native American Small Business or Native Hawaiian Corporation (Small)" name="mVendor" value="{!v.vendorDetails.MinorityVendor__c}" onchange="{!c.MVendorGroup}"/>
</div>
<div class="slds-form-element slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_5-of-6 slds-large-size_4-of-12">
<lightning:input aura:id="checkbox" type="checkbox" label="Javis-Wagner-O'Day" name="mVendor" value="{!v.vendorDetails.MinorityVendor__c}" onchange="{!c.MVendorGroup}"/></div>
<div class="slds-form-element slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_5-of-6 slds-large-size_4-of-12">
<lightning:input aura:id="checkbox" type="checkbox" label="Service Disabled Veteran Owned Small Business" name="mVendor" value="{!v.vendorDetails.MinorityVendor__c}" onchange="{!c.MVendorGroup}"/></div>
<div class="slds-form-element slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_5-of-6 slds-large-size_4-of-12">
<lightning:input aura:id="checkbox" type="checkbox" label="Veteran Owned Small Business" name="mVendor" value="{!v.vendorDetails.MinorityVendor__c}" onchange="{!c.MVendorGroup}"/></div>
<div class="slds-form-element slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_5-of-6 slds-large-size_4-of-12">
<lightning:input aura:id="checkbox" type="checkbox" label="Small Disadvantaged Business or 8(a)" name="mVendor" value="{!v.vendorDetails.MinorityVendor__c}" onchange="{!c.MVendorGroup}"/></div>
<div class="slds-form-element slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_5-of-6 slds-large-size_4-of-12">
<lightning:input aura:id="checkbox" type="checkbox" label="Women Owned Small Business" name="mVendor" value="{!v.vendorDetails.MinorityVendor__c}" onchange="{!c.MVendorGroup}"/>
Hey may be above code gives checkboxes with value = true.
Are you sure about this line. ..this is supposed to call apex side method. Syntax will be usually component. get("c. methodName");