+ Start a Discussion
Greg FinzerGreg Finzer 

How to get the id of a checkbox when clicked?

I have this lightning checkbox.  How do I get the auraid of the checkbox that was clicked?
 
<ui:inputCheckbox aura:id="{!element.GroupId}" value="{!element.Renovated}" click="{!c.handleCheckboxClick}" />

Here is the corresponding controller method:
 
handleCheckboxClick : function(component, event, helper) {

}


 
Best Answer chosen by Greg Finzer
Greg FinzerGreg Finzer
Okay everyone, I found a workaround, use the name attribute:
 
<ui:inputCheckbox name="{!element.GroupId}" value="{!element.Renovated}" click="{!c.handleCheckboxClick}" />

Here is the corresponding controller method:
 
handleCheckboxClick : function(component, event, helper) {
   
	var myName = event.getSource().get("v.name");
	console.log('myName', myName);
}

​​​​​​​

All Answers

Raj VakatiRaj Vakati
You can do it like below 
 
<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>
 
({
	 onCheck: function(cmp, evt) {
		 var checkCmp = cmp.find("checkbox");
		 resultCmp = cmp.find("checkResult");
		 resultCmp.set("v.value", ""+checkCmp.get("v.value"));

	 }
})

 
Greg FinzerGreg Finzer
@Raj,

The problem is that I do not know the id.  That is what I am trying to get.
I cannot use this line since I do not know what the id is.
var checkCmp = cmp.find("checkbox");
 
$hwet@$hwet@
Hi Greg,

Please see the below idea. I think you are also refering the same thing.Salesforce dosen't allow dynamic Id till now.

https://success.salesforce.com/ideaView?id=0873A000000E8fBQAS
Greg FinzerGreg Finzer
Okay everyone, I found a workaround, use the name attribute:
 
<ui:inputCheckbox name="{!element.GroupId}" value="{!element.Renovated}" click="{!c.handleCheckboxClick}" />

Here is the corresponding controller method:
 
handleCheckboxClick : function(component, event, helper) {
   
	var myName = event.getSource().get("v.name");
	console.log('myName', myName);
}

​​​​​​​
This was selected as the best answer