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

Posted 2023-02-18

【中文标题】Checkbox/RadioButton 选择和取消选择弹出窗口中的所有复选框

【英文标题】：Checkbox/RadioButton to select and deselect all checkboxes within a popup

【发布时间】：2016-01-21 22:30:39

【问题描述】：

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

我拥有的复选框的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>

【参考方案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;

希望能有所帮助。

【讨论】：

这仅在复选框已全部选中或全部未选中时才有效，如果有 2 个选中框和 3 个未选中，它将切换所有 5 个和 3 个选中的属性2 个未选中的复选框。

@Jordan.J.D 我知道，OP 也应该知道。当然，这只是一个例子。例如，OP 可以使用布尔值来设置选择。

这种情况下的盒子是什么？

@pconn222 box 是 VBox 的 id ：<mx:VBox id="box"><!-- .. --></mx:VBox>，抱歉，我没有在我的回答中提到。

没问题，谢谢，上面的问题还有吗？说如果选择了 2 并且用户想要全选，以保持 2 已经被选中并选择其余的？

【参考方案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>

【讨论】：

我得到 selected.check 和 selected.uncheck - MXML 语言不支持特定于状态的属性语法“selected.uncheck”

@pconn222 你用的是什么版本的 flex？

我不确定，使用的是 Flash Builder 4.6

还有其他方法吗？我的版本早于 2009 年

@pconn222 ，你可以试试akmozo的方案，明白了吗？