Classic Javascript isn't working in Lightning component, when jQuery is

Question

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!

Answer 1

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.)

Answer 2

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);
    }
}