Checkbox/RadioButton 选择和取消选择弹出窗口中的所有复选框

Question

我有一个复选框列表，我希望能够同时选择和取消选择它们，|我将如何使用复选框来做到这一点？

我拥有的复选框的mxml如下：

<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

例如，您可以使用一个按钮来选择或取消选择所有复选框，如下所示：

<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>

然后

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;
}

编辑：

你只需要反转selected，然后：

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;

希望能有所帮助。

Answer 2

我为您制作了一个小沙盒应用程序来展示视图状态的使用。点击按钮会改变状态，复选框的selected属性可以绑定到状态。

通过使用状态

    <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>

使用循环

 <?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>