2

I have a couple of checkboxes which I dynamically create trough an iteration. In want to use these to trigger a function.

My issue is when I select/check 1 checkbox all the others get checked instandly. I want to be able to check and uncheck them individually.

Component

<aura:attribute name="name" type="string" /> 
<aura:attribute name="text" type="string" /> 
<aura:attribute name="value" type="string"/> 
<aura:attribute name="selectedvalues" type="string" />
<aura:attribute name="SelectedCity" type="List[]" />
<aura:attribute name="CheckboxValue" type="Boolean" default="false" />
<aura:attribute name="myBool" type="Boolean" default="false"/>

<aura:iteration var="a" items="{!v.allaccounts}" indexVar="indx">
    <ui:inputCheckbox aura:id="checkbox" value="{!v.CheckboxValue}" text="{!a.BillingCity}" name="{!indx}" label="{!a.BillingCity}" change="{!c.selectoptionvalue}"/>
</aura:iteration>

Javascript

 var check = event.getSource().set("v.checkbox");
    var SelectedCity = [];
    if(event.getSource().get("v.CheckboxValue") == true){
        SelectedCity.push({'ids':event.getSource().get("v.name"),'name':event.getSource().get("v.text"),'CheckboxValue':event.getSource().get("v.CheckboxValue")});}

    if(event.getSource().get("v.CheckboxValue") == false){
        for(var j=0;j<SelectedCity.length;j++){
            if(SelectedCity[j].ids == event.getSource().get("v.name")){
                var index = j;
            }
        }
        SelectedCity.splice(index,1);
    }
4

This is expected; you've bound all the checkboxes to a single value. Instead, you need to create a wrapper, and check/uncheck individual values:

<ui:inputCheckbox aura:id="checkbox" 
                  value="{!a.selected}" 
                  text="{!a.record.BillingCity}" 
                  name="{!indx}" 
                  label="{!a.record.BillingCity}" 
                  change="{!c.selectoptionvalue}"/>

From there, to populate your list of selected cities, just build a new list:

selectoptionvalue: function(component, event, helper) {
  component.set("v.SelectedCity",
    component.get("v.allaccounts").filter(account => account.selected)
  );
}

Edit: Demo application that uses aura:id.


<aura:application extends="force:slds">
    <aura:attribute name="allaccounts" type="List" default="[ { BillingCity: 'Denver' }, { BillingCity: 'Ontario' }, { BillingCity: 'San Francisco' } ]" />
    <aura:attribute name="selectedCities" type="List" default="[]" />

    <aura:iteration var="a" items="{!v.allaccounts}" indexVar="indx">
        <ui:inputCheckbox aura:id="checkbox" 
                          text="{!a.BillingCity}"
                          name="{!indx}"
                          label="{!a.BillingCity}" 
                          change="{!c.selectoptionvalue}"/>
    </aura:iteration>
    <hr />
    Selections: {!join(',',v.selectedCities)}
</aura:application>

({
    selectoptionvalue: function(component, event, helper) {
        var selected = [], checkboxes = component.find("checkbox");
        if(!checkboxes) {   // Find returns zero values when there's no items
            checkboxes = [];
        } else if(!checkboxes.length) { // Find returns a normal object with one item
            checkboxes = [checkboxes];
        }
        checkboxes
        .filter(checkbox => checkbox.get("v.value"))    // Get only checked boxes
        .forEach(checkbox => selected.push(checkbox.get("v.label")));   // And get the labels
        component.set("v.selectedCities", selected);    // Set to display
    }
})
  • Could you explain a little bit further on this as why not binding the aura:id. And how do I output this result directly to the current screen output? – Thomas Jan 28 '18 at 20:57
  • @Thomas If you want to use aura:id, then you'd need to "find" the checkboxes and examine the results. I added a Short, Self Contained, Correct (Compilable), Example for you to look over. – sfdcfox Jan 28 '18 at 21:27
  • I am very very appreciative of your concise explanation. Thanks in a million to explain this. You always take time to explain! THANKS. – Thomas Jan 28 '18 at 21:39
  • @Thomas You're welcome! Glad I could help you out. – sfdcfox Jan 28 '18 at 21:53
  • 1
    @the_phantom It uses a function to filter values in the list. You can read more on the MDN: Array.prototype.filter(). – sfdcfox Jan 28 '18 at 21:58

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.