+ Start a Discussion
Andrew Taylor 13Andrew Taylor 13 

Lightning - ui:inputCheckbox checked?

I'm attempting a trailhead challenge, and completely stuck when working with ui:inputCheckbox.

I can't find in the documentation how I can:

a) determine if the checkbox is checked
b) change it from unchecked to checked (or vice versa).

 
Best Answer chosen by Andrew Taylor 13
Martijn SchwarzerMartijn Schwarzer
Hi Andrew,

Please take a look at my example. You should be able to fix your issue based off this code.

My component:
<aura:component >
	<aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <ui:button label="Packed!" press="{!c.packItem}"/>
    <ui:outputText value="{!v.item.Name}"/>
    <ui:outputNumber value="{!v.item.Quantity__c}"/>
    <ui:outputCurrency value="{!v.item.Price__c }"/>
    <ui:outputCheckbox value="{!v.item.Packed__c}"/>
</aura:component>

As you can see, the attribute is referenced as "item". 

In your controller, you will first need to get a reference to "item" and then check the field values. In this case, I set the value to true and update the ui:

//Get item (Camping_Item__c record)
var cmpItem = component.get("v.item", true);
//Set the checkbox to checked
cmpItem.Packed__c = true;
//Update the ui
component.set("v.item", cmpItem);

Hope this helps!

Happy coding! :-)

Best regards,
Martijn Schwärzer
 

All Answers

Martijn SchwarzerMartijn Schwarzer
Hi Andrew,

Please take a look at my example. You should be able to fix your issue based off this code.

My component:
<aura:component >
	<aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <ui:button label="Packed!" press="{!c.packItem}"/>
    <ui:outputText value="{!v.item.Name}"/>
    <ui:outputNumber value="{!v.item.Quantity__c}"/>
    <ui:outputCurrency value="{!v.item.Price__c }"/>
    <ui:outputCheckbox value="{!v.item.Packed__c}"/>
</aura:component>

As you can see, the attribute is referenced as "item". 

In your controller, you will first need to get a reference to "item" and then check the field values. In this case, I set the value to true and update the ui:

//Get item (Camping_Item__c record)
var cmpItem = component.get("v.item", true);
//Set the checkbox to checked
cmpItem.Packed__c = true;
//Update the ui
component.set("v.item", cmpItem);

Hope this helps!

Happy coding! :-)

Best regards,
Martijn Schwärzer
 

This was selected as the best answer
Andrew Taylor 13Andrew Taylor 13
Aha, that's it! Thanks very much, Martijn!
Martijn SchwarzerMartijn Schwarzer
You're very welcome Andrew!

Happy coding!
{!Piyush_soni__c}{!Piyush_soni__c}
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/  (http://www.sfdcmonkey.com/2017/02/23/delete-multiple-records-using-checkbox-lightning-component/)
Hope it's helps :)