1

I have a checkbox in a lightning component:

<ui:inputCheckbox aura:id="chkAddToList" click="{!c.action}" class="chkMultiSelectTalents" />

In a different component's controller (or helper), I'm trying to uncheck the checkboxes. The jQuery selector works:

$('.chkMultiSelectTalents');

But the pure javascript option does not. getElementsByClassName AND querySelectorAll both return null:

var selectedCheckedBoxes = document.getElementsByClassName('chkMultiSelectTalents');
var selectedCheckedBoxes = document.querySelectorAll('.chkMultiSelectTalents');

When running the classic javascript in Chrome's developer console, it find the elements. Makes debugging this that much harder.

I'm pretty new to Lightning so I may be overlooking something obvious. I have these same selectors other components, and it's working fine. Thanks!

  • 4
    you might want to check the aura docs whie you are at it and get familiar with the framework instead of throwing yourself into ideveloping and finding out that many things you are used to not working. There is quite an extensive list of Javascript features you will find that are restriced in the aura framework. if you are assigning an aura:id to your checkboxes, why not use component.find('aura:id') ? – glls Dec 4 '17 at 16:47
4

A key point that you are missing is that by design the Lightning Component environment blocks access to parts of the DOM that are owned by other namespaces. This is a fundamental security mechanism provided by the Locker Service. But for those of us used to walking all over the DOM via convenient jQuery expressions it takes a bit of getting used to.

The Lightning Component equivalent is e.g. to find by the aura:id. (Unfortunately it isn't as elegant as jQuery selectors in that you might get returned undefined, one component or an array of components.) Best to start thinking mainly about the component tree, component attributes and component events and much less about the DOM. All HTML markup gets turned into Lightning Components.

(Also probably best to not add jQuery to any new code as the services it provides can tempt you to try to do the wrong thing.)

  • Thanks! Just realized the code that was working was accessing elements in the same component. Didn't realize Lightning blocked DOM manipulation across other components. – Alex Dec 4 '17 at 20:35
  • @Alex It can be really painful e.g. change from a raw HTML input to a lightning:input and suddenly no access. So best to embrace the new patterns. – Keith C Dec 4 '17 at 20:49
1

I would recommend using lightning native features to uncheck your checkbox as described in the documentation:

({
     action: function(cmp, evt) {
         var checkbox = cmp.find("chkAddToList");
         checkbox.set("v.value", false);
     }
})

And if you want to uncheck a list of checkboxes, just give them the same aura:id and iterate through them like this:

action: function(cmp, evt) {
    var checkboxes = cmp.find("chkAddToList");

    for(var checkbox of checkboxes) {
        checkbox.set("v.value", false);
    }
}

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.