How do I get the Value of a ui:inputCheckBox Lightning Component?

Question

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?

Answer 1

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.

Answer 2

To add to these, here's a simple app that shows some good vs. bad variations.

test.app

<aura:application access="GLOBAL">
    <aura:attribute name="myBool" type="Boolean" access="GLOBAL" default="true"/>
    <aura:handler name="change" value="{!v.myBool}" action="{!c.handleValueChange}"/>
    <h1>myBool: {!v.myBool}</h1>
    <div>
        <ui:inputCheckbox value="{!v.myBool}" change="{!c.handleCheckboxChange}"/>
        ui:inputCheckbox &#8592; Good
    </div>
    <div>
        <input name="checkbox" type="checkbox" checked="{!v.myBool}" onclick="{!c.handleInputCheckboxChange}"/>
        input type="checkbox" &#8592; Good
    </div>
    <div>
        <input name="checkbox" type="checkbox" checked="checked"/>
        input type="checkbox" &#8592; Bad
    </div>
    <div>
        <ui:button label="Toggle myBool" press="{!c.toggleMyBool}"/> &#8592; Good
    </div>
    <div>
        <ui:button label="Toggle Input Checkbox" press="{!c.toggleInputCheckbox}"/> &#8592; Bad
    </div>
</aura:application>

testController.js

({
    handleValueChange: function(component, event, helper) {
        var myBool = component.get("v.myBool");
        console.warn("handleValueChange - myBool: ", myBool);
    },

    handleCheckboxChange: function(component, event, helper) {
        var myBool = component.get("v.myBool");
        console.warn("handleCheckboxChange - myBool: ", myBool);
        var element = event.getSource ? event.getSource().getElement() : event.target;
    },

    handleInputCheckboxChange: function(component, event, helper) {
        var element = event.getSource ? event.getSource().getElement() : event.target;
        console.warn("hanldeInputCheckboxChange - element checked: ", element.checked);
        component.set("v.myBool", element.checked);
    },

    toggleMyBool: function(component, event, helper) {
        var myBool = component.get("v.myBool");
        component.set("v.myBool", !myBool);
    },

    toggleInputCheckbox: function(component, event, helper) {
        var elements = document.getElementsByName("checkbox");
        for (var i = 0; i < elements.length; i++) {
            elements.item(i).checked = elements.item(i).checked ? "" : "checked";
        }
    }
})

Attributes and events are your friend when building Lightning Components. You can work directly with DOM elements if you're careful, but it's easy to do things that break data-binding.

Answer 3

<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}" value=""/>                                        

You have missed value attribute there in ui:inputCheckbox

To get text value of component you will probably need below script

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