Problem
I have a list of items, and I want to let the app users select the items using a CheckBox.
Solution
I added an event handler for the itemClick event, so every time the user clicks over an item from the List it dispatches this event, in this event handler I verify if the user selected or unselected the CheckBox, then it adds or remove the rowIndex from the array collection mySelectedIndices, and finally the I set the list.selectedIndices to mySelectedIndeces in order to reflect the changes.
Detailed explanation
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
import mx.controls.CheckBox;
private var mySelectedIndices:ArrayCollection=new ArrayCollection();
private function onChange(e:ListEvent):void
{
if(CheckBox(e.itemRenderer).selected){
mySelectedIndices.addItem(e.rowIndex);
}else{
if(mySelectedIndices.getItemIndex(e.rowIndex)!=-1){
mySelectedIndices.removeItemAt(mySelectedIndices.getItemIndex(e.rowIndex))
}
}
chkList.selectedIndices=mySelectedIndices.toArray();
}
]]>
</mx:Script>
<mx:ArrayCollection id="collection">
<mx:Object label="Test A"/>
<mx:Object label="Test B"/>
<mx:Object label="Test C"/>
<mx:Object label="Test D"/>
<mx:Object label="Test E"/>
<mx:Object label="Test F"/>
<mx:Object label="Test G"/>
</mx:ArrayCollection>
<mx:List id="chkList" dataProvider="{collection}" itemRenderer="mx.controls.CheckBox"
itemClick="onChange(event);" allowMultipleSelection="true" height="500"/>
</mx:Application>
