0

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>
splash
  • 13,037
  • 1
  • 44
  • 67
pconn222
  • 11
  • 3

2 Answers2

0

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.

akmozo
  • 9,829
  • 3
  • 28
  • 44
  • 1
    This would only work if the check boxes were already all selected or all unselected, if there are 2 selected boxes and 3 that are not selected, it would switch the properties on all 5 and be 3 selected and 2 not selected checkboxes. – Jordan.J.D Oct 22 '15 at 20:43
  • 1
    @Jordan.J.D I know that, and OP should know that. Of course it was just an example. OP can use a Boolean, for example, to set the selection. – akmozo Oct 22 '15 at 21:34
  • What is box in this case? – pconn222 Oct 29 '15 at 09:14
  • @pconn222 `box` is the id of the `VBox` : ``, sorry, I didn't put that in my answer. – akmozo Oct 29 '15 at 10:30
  • No problem thanks, is there anyway round the issue above? say if 2 are selected and a user want to select all, to keep the 2 already selected and select the rest also? – pconn222 Oct 29 '15 at 10:42
  • Yes I understand, this creates a problem on the change event I have on each checkbox, the button works although it never triggers that the state of the checkbox has changed in order to trigger this event – pconn222 Oct 29 '15 at 16:23
  • @pconn222 Which kind of problem do you have ? – akmozo Oct 29 '15 at 16:34
  • Once a single checkbox is clicked or unclicked it triggers the onCheckboxChange(event) to either remove or add the selected item to the array. Although once the button is clicked for selecting/deseleting all this is never triggered – pconn222 Oct 29 '15 at 16:40
  • @pconn222 The `change` event is fired only after the user interaction. You can use, for example, a function to set that array, which you can call inside your both events handlers ... – akmozo Oct 29 '15 at 17:08
  • if(selected){ //init(); // var index:int = selectedEvents.indexOf(eventName); for each(var eventName:String in eventNames){ if(selectedEvents.indexOf(eventName)==-1){ selectedEvents.push(eventName); } } } else{ for each(var eventName:String in eventNames){ var index:int = selectedEvents.indexOf(eventName); if(index>-1){ selectedEvents.splice(index,1); – pconn222 Oct 30 '15 at 09:51
  • Not sure where I can post this to look decent but this is what happens once user ticks/untick a single select box – pconn222 Oct 30 '15 at 09:55
0

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>

enter image description here enter image description here

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>
Jordan.J.D
  • 7,999
  • 11
  • 48
  • 78