[SalesForce] How to get the Value of a ui:inputCheckBox Lightning Component

I am currently stuck on an issue I am having getting the value of the ui:inputCheckbox Lightning component. In the Lightning Component Developer Guide, the following example is provided:

COMPONENT MARKUP

<aura:component>
<aura:attribute name="myBool" type="Boolean" default="true"/>
<ui:inputCheckbox aura:id="checkbox" label="Select?" change="{!c.onCheck}"/>
<p>Selected:</p>
<p><ui:outputText class="result" aura:id="checkResult" value="false"/></p>
<p>The following checkbox uses a component attribute to bind its value.</p>
<ui:outputCheckbox aura:id="output" value="{!v.myBool}"/>
</aura:component>

COMPONENT CONTROLLER

({
    onCheck: function (cmp, event, helper) {
        var checkCmp = cmp.find("checkbox");
        resultCmp = cmp.find("checkResult");
        resultCmp.set("v.value", "" + **checkCmp.get("v.value")**);
    }
})

I am currently using the exact pattern in my markup as follows:

MY COMPONENT MARKUP

<div class="pbxs">
     <div class="tc wht pas mhauto"></div>
     <ui:inputCheckbox aura:id="taskCheckBox" text="{!nextsteps.task.Id}"  class="sq-25 checkbox checkbox--default checkbox--states-1 brm mrs bg-secondary-btn sq-22 a-mid dib" change="{!c.handleCheckTask}"/>                                        
</div>

MY COMPONENT CONTROLLER

handleCheckTask : function(cmp, event, helper) {
        var checkCmp = cmp.find("taskCheckBox");
        console.log("value : " + **checkCmp.get("v.value")**)
}

Strangely, when I click the checkbox in my component, I get the following aura error:

"Uncaught error in markup://ui:change : checkCmp.get is not a
function"

I am not sure why I am getting that error when I am using the same pattern as in the example. I tried re-creating the example from the guide. When I did that, I did not get the error. Can anyone see what I might be missing?

Best Answer

Mohit points out that right now you aren't binding the value of the ui:checkbox to a component attribute, but that's not of concern here.

Using your code copied and pasted into a new component, I cannot reproduce your error. The checkbox state changes and it reports to console. Is there other code in the mix here? Is that your code verbatim?

That being said, both the dev guide and your code follow a bit of an anti-pattern in the event handler. Instead of setting a findable aura:id and hard referencing that in your controller, your code is much more useful (and would handle a list view) if you use the event source instead. Example:

handleChanged : function(cmp,evt,helper){
    var checkbox = evt.getSource();
    console.log(checkbox.get("v.value"));
}

This will fine the component that fired the event.

Related Topic