5

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?

  • Hey Daniel, I wanted to loop back around on this one as I think it's the only one of your recent questions about Lightning we haven't resolved! Did you get a chance to try the code in isolation? Have you moved forward from here? If so, you can answer your own question for future devs! – Christian Carter Jul 17 '15 at 5:57
  • Christian, sorry for not checking the answer sooner. Your answer below was very helpful! Thanks! – Daniel Fuller Jul 17 '15 at 17:49
  • Oh don't be sorry, I just wanted to make sure your app wasn't stuck still. You've had a lot of component questions lately, so you must be building something cool. – Christian Carter Jul 17 '15 at 21:49
5

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.

  • Interesting. Yeah that's all the code I am using. I just have the change event calling the controller function where I am getting the error. Were you saying that adding the value attribute might not be the issue? I have been able to get it to work using the core Javascript event.target which I assume is the same as event.Source ()? – Daniel Fuller Jul 5 '15 at 16:35
  • Also, I did try to use the event.Source () and also received an error stating that event.Source was not a function. So I am not sure why event.target works but event.Source() does not since they both reference the event parameter. – Daniel Fuller Jul 5 '15 at 16:36
  • The value attribute is not required and isn't your problem. First, I want to confirm that you're using event.getSource() and not event.source(). Unlike in Visualforce, we need to explicitly specify that we're using a getter. I also want to make sure that you're using the change event, and not the onclick event. Native browser events would offer target to refer to the HTML node whereas Lightning events should provide getSource to refer to the Component. – Christian Carter Jul 5 '15 at 17:04
  • That said, at least it's working! I don't see anything else obvious. Can you create a new component with just a checkbox and your stripped down code, and see what happens? – Christian Carter Jul 5 '15 at 17:06
3

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.

1
<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"))
 }

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.