You'll need to set the value on each checkbox to be the Id of the contact, like this:
<aura:attribute name="contacts" type="Contact[]" />
<aura:attribute name="checkedContacts" type="String[]" />
<aura:iteration var="con" items="{!v.contacts}">
<ui:inputcheckbox text="{!con.Id}" label="{!con.Name}" change="{!c.updateCheckboxes}"/>
</aura:iteration>
Then use a client-side handler either on each checkbox or on a button to check whether each checkbox is checked and add its value (the contact Id) to an array. For example, here's my updateCheckboxes handler:
updateCheckboxes : function(component, event) {
var id = event.source.get("v.text");
if (event.source.get("v.value")) {
// Checkbox is checked - add id to checkedContacts
if (component.get("v.checkedContacts").indexOf(id) < 0) {
component.get("v.checkedContacts").push(id);
}
} else {
// Checkbox is unchecked - remove id from checkedContacts
var index = component.get("v.checkedContacts").indexOf(id);
if (index > -1) {
component.get("v.checkedContacts").splice(index, 1);
}
}
}
(PS: It's important to use the ui:inputcheckbox label attribute to set the label, and not just stick it next to the checkbox in the component markup. ui:inputcheckbox will programmatically associate the label with the checkbox properly, making the label accessible to assistive technologies like screen readers. All the basic components have been carefully built to be accessible like this, so you get it for free as long as you use them correctly.)
The entire lightning component framework works on event driven pattern .So there will be a publisher and listener.
Lets assume i have list of Accounts using aura:iteration ,something like below
<div class="list-group" aura:id="listview">
<aura:iteration items="{!v.lstAccnts}" var="account">
<c:LightningSPAlist act="{!account}"/>
</aura:iteration>
</div>
Observe how each list item is also a component .Hence LightningSPAlist item would be like below
<aura:component >
<aura:attribute name="act" type="Account"/>
<aura:registerEvent name="selectAccount" type="c:selectAccount" />
<a href="#" aura:id="{!v.act.Id}" onclick="{!c.select}" class="list-group-item">
<h4 class="list-group-item-heading">{!v.act.Name}</h4>
<p class="list-group-item-text">Phone :{!v.act.Phone}</p>
</a>
</aura:component>
The JS controller function once we select an Account
({
select : function(component, event, helper) {
var account = component.get("v.act");
var selectEvent = $A.get("e.c:selectAccount");
selectEvent.setParams({ "saccount": account });
selectEvent.fire();
},
})
Observe above how an event is fired off ,the event file defination is below
<aura:event type="APPLICATION">
<aura:attribute name="saccount" type="Account"/>
The listener component will handle this event and perform actions based on captured event
<aura:handler event="c:selectAccount" action="{!c.populatedetail}"/>
The JS function
({
populatedetail: function(component, event, helper) {
var selected = event.getParam("saccount");
component.set("v.actdetail",selected);
},
})
Best Answer
in your iteration, you might want to set the id to some attribute and use an onchange event handler, for example:
and use event.getSource().get('v.value') in the client-side controller to get the button components value that was triggered the onchange event