4

I have two checkboxes in a lightning component, when we click on the first checkbox it marks true to the other checkbox, it works well only with the UI tags but doesn't work when I convert it to lightning tag

<ui:inputCheckbox aura:id="box3" change="{!c.selectAll}"/>

<ui:inputCheckbox aura:id="boxPack" value=""                                       
                  change="{!c.checkboxSelect}"/>

below are the lightning tags

<lightning:input type="checkbox" aura:id="box3" onclick="{!c.selectAll}"/>

<lightning:input type="checkbox" aura:id="boxPack" value=""                                       
                  onclick="{!c.checkboxSelect}"/>

controller

checkboxSelect: function(component, event, helper) {
        // get the selected checkbox value  
        var selectedRec = event.getSource().get("v.value");
        // get the selectedCount attrbute value(default is 0) for add/less numbers. 
        var getSelectedNumber = component.get("v.selectedCount");
        // check, if selected checkbox value is true then increment getSelectedNumber with 1 
        // else Decrement the getSelectedNumber with 1     
        if (selectedRec == true) {
            getSelectedNumber++;
        } else {
            getSelectedNumber--;
        }
        // set the actual value on selectedCount attribute to show on header part. 
        component.set("v.selectedCount", getSelectedNumber);
    },

    selectAll: function(component, event, helper) {
        //get the header checkbox value  
        var selectedHeaderCheck = event.getSource().get("v.value");
        // get all checkbox on table with "boxPack" aura id (all iterate value have same Id)
        // return the List of all checkboxs element 
        var getAllId = component.find("boxPack");
        // If the local ID is unique[in single record case], find() returns the component. not array   
        if(! Array.isArray(getAllId)){
            if(selectedHeaderCheck == true){ 
                console.log('true');
                component.find("boxPack").set("v.value", true);
                component.set("v.selectedCount", 1);
            }else{
                component.find("boxPack").set("v.value", false);
                component.set("v.selectedCount", 0);
            }
        }else{
            // check if select all (header checkbox) is true then true all checkboxes on table in a for loop  
            // and set the all selected checkbox length in selectedCount attribute.
            // if value is false then make all checkboxes false in else part with play for loop 
            // and select count as 0 
            if (selectedHeaderCheck == true) {
                for (var i = 0; i < getAllId.length; i++) {
                    component.find("boxPack")[i].set("v.value", true);
                    component.set("v.selectedCount", getAllId.length);
                }
            } else {
                for (var i = 0; i < getAllId.length; i++) {
                    component.find("boxPack")[i].set("v.value", false);
                    component.set("v.selectedCount", 0);
                }
            } 
        }  

    },
4

You might want to use onchange event handler on your component to track changes in your lighting:input components vs using onclick,

why?

Because onclick will invoke your method regardles if the checkbox's value actually changes, for example, selecting the label will trigger the event.

However, if you use onchange, it will only trigger the event if you tick the checkbox istself and the value changes from tru to false or false to true.

Additionally, your checkboxes will need designated and unique values, otherwise this may cause behavioral issues (wrong checkbox selected, or both selected at the same time if they both share the same value).

for example:

<lightning:input type="checkbox" aura:id="boxPack" value="Potato 1"                                       
              onchange="{!c.checkboxSelect}"/>
<lightning:input type="checkbox" aura:id="boxPack" value="Potato 2"                                       
                  onchange="{!c.checkboxSelect}"/>

Controller.js

 checkboxSelect: function(cmp, event, helper) {
    console.log(event.getSource().get('v.checked'));
    console.log(event.getSource().get('v.value'));
},

As per checking for the boolean value, you want to get the v.checked parameter, and for the value attribute v.value

  • Thank you so much @glls , now it is working as expected, but in my sellectAll controller instead of v.value = true, I marked v.cehcked = true, could you please explain the difference between v.value and v.chked? – gs650x Aug 23 '18 at 14:47
  • 1
    i thought i just did in the last lines of my answer, boolean value VS Value attribute? let me know if its not clear – glls Aug 23 '18 at 14:50

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.