Checkbox/RadioButton to select and deselect all checkboxes within a popup - actionscript-3

Question

I have a list of check boxes that I want to be able to select and deselect them all at once, how would |I do this using a check box?
The mxml of the check boxes I have are below:
<mx:VBox>
<mx:CheckBox id="newCB" label="NEW" selected="true" change="onCheckboxChange(event)" />
<mx:CheckBox id="tradeCB" label="TRADE" selected="true" change="onCheckboxChange(event)"/>
<mx:CheckBox id="amendCB" label="AMEND" selected="true" change="onCheckboxChange(event)" />
<mx:CheckBox id="cancelCB" label="CANCEL" selected="true" change="onCheckboxChange(event)" />
</mx:VBox>

Answer 1

You can use, for example, a button to select or deselect all your check boxes like this :
<mx:VBox id="box">
<mx:CheckBox id="newCB" label="NEW" selected="true" change="onCheckboxChange(event)" />
<mx:CheckBox id="tradeCB" label="TRADE" selected="true" change="onCheckboxChange(event)"/>
<mx:CheckBox id="amendCB" label="AMEND" selected="true" change="onCheckboxChange(event)" />
<mx:CheckBox id="cancelCB" label="CANCEL" selected="true" change="onCheckboxChange(event)" />
</mx:VBox>
Then
var num_children:int = box.numChildren;
var selected:Boolean = true;
for(var i:int = 0; i < num_children; i++)
{
var checkbox:CheckBox = CheckBox(box.getChildAt(i));
checkbox.selected = ! selected;
}
Edit :
You have just to inverse the selected, then :
for(var i:int = 0; i < num_children; i++)
{
var checkbox:CheckBox = CheckBox(box.getChildAt(i));
if(checkbox.selected == selected) checkbox.selected = ! selected;
}
selected = false;
Hope that can help.

Answer 2

I made a little sandbox app for you to show the use of view states. On button click it changes the state, and the checkboxes' selected properties can be bound to the state.
By using states
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Button click="onClick()" label="{this.currentState=='check'?'uncheck':'check'}"/>
<mx:VBox>
<mx:CheckBox id="newCB" label="NEW" selected="true" selected.check="true" selected.uncheck="false"/>
<mx:CheckBox id="tradeCB" label="TRADE" selected="true" selected.check="true" selected.uncheck="false"/>
<mx:CheckBox id="amendCB" label="AMEND" selected="true" selected.check="true" selected.uncheck="false"/>
<mx:CheckBox id="cancelCB" label="CANCEL" selected="true" selected.check="true" selected.uncheck="false"/>
</mx:VBox>
</s:WindowedApplication>
By using a loop
<?xml version="1.0"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script><![CDATA[
[Bindable]
private var checkAll:Boolean = false;
public function onClick():void {
for each(var c:CheckBox in checkboxes.getChildren()){
c.selected = checkAll;
}
checkAll = !checkAll;
}
]]></fx:Script>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Button click="onClick()" label="{checkAll?'check all':'uncheck all'}"/>
<mx:VBox
id="checkboxes">
<mx:CheckBox id="newCB" label="NEW" selected="true"/>
<mx:CheckBox id="tradeCB" label="TRADE" selected="true" />
<mx:CheckBox id="amendCB" label="AMEND" selected="true" />
<mx:CheckBox id="cancelCB" label="CANCEL" selected="true"/>
</mx:VBox>
</s:WindowedApplication>