3

Right now I'm trying to do something that requires having a checkbox that allows selecting all checkboxes in a list for some other functionality later. The problem is that I'm not quite sure how to make select all work. I thought I would be able to do so through the controller, but then to use component.find, I might need to set aura:id on all the checkboxes and know them in advance. The problem is that I might not know the id in advance.

The second option I considered was possibly having an boolean attribute and possibly update all checkboxes by setting their value to the boolean attribute (false by default). Doing the update either via controller, helper or maybe event. Unsure of the correct approach in doing a select all with a "master" checkbox in Lightning.

<label class="slds-checkbox" 
       for="select-all" 
       onclick="{!c.doSelectAllContacts}">
    <input name="checkbox" type="checkbox" id="select-all" />
    <span class="slds-checkbox--faux"></span>
    <span class="slds-form-element__label slds-assistive-text">select all</span>
</label>
<button onclick="{!c.myArbitaryActionWithAllContactsSelected}">Action</button> 

<aura:iteration var="con" items="{!v.contacts}">
    <tr>
        <td class="slds-row-select">
            <label class="slds-checkbox" for="{!'select-row-' + index}">
            <input name="{!'select-row-' + index}" type="checkbox" id="{!'select-row-' + index}"/>
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label slds-assistive-text">select row {!index}</span>
            </label>
        </td>
        <td>{!con.Name}</td>
    </tr>
</aura:iteration>

2 Answers 2

3

You could also consider having the checkboxes in a second component that subscribes to an application event that you fire when you push the master button.

<aura:application >
    <ui:button label="CheckAllBoxes" press="{!c.fireCheckAllCheckboxes}" />
    <!-- iteration -->
        <analysis:ComponentWithCheckbox />
    <!-- /iteration -->
</aura:application>

controller

({
    fireCheckAllCheckboxes : function(component, event, helper) {
        var appevent = $A.get("e.analysis:CheckAllCheckboxes");
        appevent.fire();
    }
})

CheckAllCheckboxes event

<aura:event type="APPLICATION" description="CheckAllCheckboxes" />

ComponentWithCheckbox

<aura:component >
    <aura:handler event="analysis:CheckAllCheckboxes" action="{!c.checkTheBox}" />
    <ui:inputCheckbox aura:id="TheCheckBox" label="Checkbox" />
</aura:component>

ComponentWithCheckboxController

({
    checkTheBox : function(component, event, helper) {
        var TheCheckBox = component.find("TheCheckBox");
        TheCheckBox.set("v.value",true);
    }
})

Also, if the checkboxes all have the same aura:id, calling find() on the component will return an array with all of those components. If that works for you, you could do something like this:

<aura:application >
    <aura:attribute name="numbers" type="Integer[]" default="[0,1,2,3,4,5,6,7]" />

    <ui:button label="CheckAllBoxes" press="{!c.checkAllCheckboxes}" />

    <aura:iteration items="{!v.numbers}" var="number">
        <ui:inputCheckbox label="{!number}" aura:id="DependentCheckbox" />
    </aura:iteration>

</aura:application>

Controller

({
    checkAllCheckboxes : function(component, event, helper) {
        var checkboxes = component.find("DependentCheckbox");
        for (var i = 0; i < checkboxes.length; i++){
            checkboxes[i].set("v.value",true);
        }
    }
})
2
  • I'm just thinking about this from a general perspective of ids. I always thought that ids should be unique to a specific element. Should aura:id not be looked at with that same philosophy?
    – Justin
    Jan 14, 2016 at 18:38
  • 1
    @Justin Using the word "id" does seem to imply that the value is a unique identifier. Certainly when referring to dom elements ids should be unique since the javascript getElementById() function will only return a single element even if there are multiple components with the same id. The lightning find() method is a bit more flexible though and will return an array if there are more than one component with the same id. I personally can't say for sure whether using aura:ids that way would be considered bad practice, but it was built into the framework and it does work.
    – martin
    Jan 18, 2016 at 10:57
-1

Simplest approach would be to assign a random class "childCheckbox" to all of the checkboxes and then use jquery to find those elements and mark them selected.

Let me know if you need some help with jQuery code.

1
  • Thanks for the suggestion, but I'm trying to stick with Lightning as much as possible without using 3rd party libraries.
    – Justin
    Jan 14, 2016 at 18:19

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .