function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Daniel FullerDaniel Fuller 

How can I get the value of the 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?
Mohith Kumar ShrivastavaMohith Kumar Shrivastava
<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"))
}

 
Monika Shewale 24Monika Shewale 24
In component controller u need to define "resultCmp" as "resultCmp = cmp.find("checkResult");"
sfdcMonkey.comsfdcMonkey.com
here is the sample code for delete-multiple-records-using-checkbox-lightning-component
http://www.sfdcmonkey.com/2017/02/23/delete-multiple-records-using-checkbox-lightning-component/ 
Hope it's helps :)
Dana GriffDana Griff
Seems like the example in the salesforce developer guide is incorrect as well.

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


where do they define resultCmp? and what exactly does this code do?

please help
Thanks
Umang SinghalUmang Singhal
check the below link which has complete working code.
https://umangsinghal.wordpress.com/2017/06/11/move-selected-table-values-from-one-component-to-another
Michele Kleinhomer 10Michele Kleinhomer 10
I got the Check box code to work with the following:
Component 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,lightning:availableForFlowScreens">
    <aura:attribute name="myBool" type="Boolean" default="false"/>
    <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>

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

​​​​​​​