Toggling a group of Spark CheckBox controls in Flex 4

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/14/toggling-a-group-of-spark-checkbox-controls-in-flex-4/ -->
<s:Application name="Spark_Group_getElementAt_test"
        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[
            protected function tgBtn_changeHandler(evt:Event):void {
                var idx:uint;
                const len:uint = chGr1.numElements;
                for (idx = 0; idx < len; idx++) {
                    var elmt:CheckBox = chGr1.getElementAt(idx) as CheckBox;
                    elmt.selected = tgBtn.selected;
                }
            }
        ]]>
    </fx:Script>
 
    <s:Panel id="pnl"
            title="Spark Panel title"
            horizontalCenter="0" verticalCenter="0">
        <s:controlBarContent>
            <s:ToggleButton id="tgBtn"
                    label="Toggle CheckBoxes"
                    change="tgBtn_changeHandler(event);" />
        </s:controlBarContent>
        <s:VGroup id="chGr1"
                gap="0"
                left="10" right="10" top="10" bottom="10">
            <s:CheckBox id="ch1" label="CheckBox One" />
            <s:CheckBox id="ch2" label="CheckBox Two" />
            <s:CheckBox id="ch3" label="CheckBox Three" />
            <s:CheckBox id="ch4" label="CheckBox Four" />
            <s:CheckBox id="ch5" label="CheckBox Five" />
            <s:CheckBox id="ch6" label="CheckBox Six" />
            <s:CheckBox id="ch7" label="CheckBox Seven" />
            <s:CheckBox id="ch8" label="CheckBox Eight" />
            <s:CheckBox id="ch9" label="CheckBox Nine" />
        </s:VGroup>
    </s:Panel>
 
</s:Application>