I needed to display to the users a List component with checkboxes;

• I needed to do this to remove the need for CTRL & CTRL+Shift commands that might have been 'above' the technical level of my users.
• I needed the visual effect they provided.
• I wanted the items to be highlighted and apear mostly as they do in a standard list.
• And lastly I wanted to be able to access what was choosen by the [myList.selectedItems] and not a custom holder.

I'm sure there are a few ways to make this happen, so I welcome any alternative advice. "View Source" is enabled on this flex app.

<flash source="/FlexApps/ProgramaticMultipleSelect/ProgramaticMultipleSelect.swf" width="386" height="163" quality="high" scriptAccess="none" align="center" />

My start page sets up the array for testing and calls on my extended List component "CheckBoxList.<mx:Application ...>

    <mx:Script> />        <![CDATA[
            private static const people:Array = [
                "Christina Coenraets", "Joanne Wall", "Maurice Smith", ...
            ];
        ]]>
    </mx:Script> />
    <local:CheckBoxList id="listOfPeople" dataProvider="{people}" width="200" height="140" />
    <mx:List dataProvider="{this.listOfPeople.selectedItems}" width="154" height="140" />

</mx:Application>

My custom List component overrides the mouse events, doing nothing with them. Instead I listen for itemChecked and itemUnchecked events to fire off my selection methods.

The part I struggled with in doing this was getting multiple options to be selected. It turns out that even though the List.selectedItems is an array, you can't just push to it. You have to do a replacement. The explains the concat and splice code you see below.<?xml version="1.0" encoding="utf-8"?>
<mx:List
    xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="onCreationComplete();"
    itemRenderer="ItemRenderer"
>

    <mx:Script> />        <![CDATA[
            private function onCreationComplete():void {
                 this.addEventListener("ItemChecked", onItemChecked);
                 this.addEventListener("ItemUnchecked", onItemUnchecked);
            }

             private function onItemChecked(event:ListItemEvent):void {
                 event.stopPropagation();
                this.selectedItems = this.selectedItems.concat([event.targetItem]);
                this.dispatchEvent(new Event(Event.CHANGE));
            }

             private function onItemUnchecked(event:ListItemEvent):void {
                 event.stopPropagation();

                var pos:int = this.selectedItems.indexOf(event.targetItem);

                this.selectedItems = this.selectedItems.filter(
                    function (item:*, index:int, array:Array):Boolean {
                        return item != this.targetItem;
                    },
                    event
                );

                this.dispatchEvent(new Event(Event.CHANGE));
            }

            override protected function mouseUpHandler(event:MouseEvent):void {}
            override protected function mouseDownHandler(event:MouseEvent):void {}
            override protected function focusInHandler(event:FocusEvent):void {}
        ]]>
    </mx:Script> />
</mx:List>

My ItemRenderer handles throwing the ItemChecked and ItemUnchecked events. Notice my checkbox selection check in my "set date" function. This makes sure that the correct boxes are always checked when the user scrolls.<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalScrollPolicy="off">
    <mx:Script> />        <![CDATA[
            import mx.controls.List;

            [Bindable] private var displayName:String;

             override public function set data(value:Object):void {
                super.data = value;
                displayName = value as String;

                var list:List = this.parent.parent as List;
                checkbox.selected = (list.selectedItems.indexOf(value) > -1);
            }

            private function flipSelectedSwitch():void {
                this.checkbox.selected = !this.checkbox.selected;
                this.onSelectedChange();
            }

            private function onSelectedChange():void {
                if (checkbox.selected)
                    dispatchEvent(new ListItemEvent("ItemChecked", this.data, true, true));
                else
                    dispatchEvent(new ListItemEvent("ItemUnchecked", this.data, true, true));
            }
        ]]»
    </mx:Script> />
    <mx:Label width="100%" text="{displayName}" click="flipSelectedSwitch();" />
    <mx:CheckBox id="checkbox" change="onSelectedChange();" paddingRight="10" />
</mx:HBox>