Tuesday, September 28, 2010

Creating a 'select all' CheckBox

In this tutorial we will create a CheckBox that checks all the rest CheckBoxes.

In every e-mail service, there's a feature that allows you to select all the messages on screen by clicking one checkboxes (which checks all the rest too). Here is an example of two slightly different features I made:


The select all checkbox in the first collumn makes each checkbox selected or not selected according according to its own value. In the second collumn - main checkbox, when clicked, toggles all the boxes under it (the ones that were false are set to true, and the ones that were true are set to false).

Two main checkboxes are called s1 and s2, those that belong to the first collumn are called c11, c12, c13 etc. and those that belong to the second collumn are called c21, c22, c23 etc. Code:

import fl.controls.CheckBox;

var checkboxArray1:Array = [c11,c12,c13,c14,c15];

s1.addEventListener(MouseEvent.CLICK, f1);

function f1(evt:MouseEvent):void{
for (var i:int=0; i<checkboxArray1.length; i++){
checkboxArray1[i].selected=evt.target.selected}
}

var checkboxArray2:Array = [c21,c22,c23,c24,c25];

s2.addEventListener(MouseEvent.CLICK, f2);

function f2(evt:MouseEvent):void{
for (var i:int=0; i<checkboxArray2.length; i++){
checkboxArray2[i].selected = (checkboxArray2[i].selected)?(false):(true);
}}

Thank you for reading!

No comments:

Post a Comment