axure实现复选框全选_Axure 实例 － 复选框的全选 & 取消（转）

复选框的［全选］与［取消］是比较常见的一种交互事件，常用于对于某列表的批量编辑，形式一般来说有两种，早前常见的是通过［全选］和［取消］两个

Button 来完成对于 CheckBox 的控制，现在更多见的是只通过对一个 CheckBox

的开关式操作来完成，这次实例带来的就是对于后者在 Axure 中的实现方法。

要求：

1、将一个 CheckBox

控件做为控制开关，即该项选中则实现对于其它复选框的［全选］操作，取消选中则实现对于其它复选框的［取消］操作。

2、作为开关的 CheckBox 在［全选］和［未选］时要有状态提示。

2、对任意复选框进行［选择］与［取消］的操作都会影响做为开关 CheckBox 的状态。

由于对做为开关的 CheckBox 要有状态提示，所以这里需要通过动态面板来实现。拖一个 Dynamic Panel

到页面，命名为［switch］，在其中建两个

State，分别命名为［select］［cancel］，在［select］中放置用于［全选］的

CheckBox，命名为［select-all］，在［cancel］中放置用于［取消］的

CheckBox，命名为［select-none］。

再拖三个 CheckBox 到页面，分别命名为［checkbox-1］［checkbox-2］［checkbox-3］，这里

CheckBox 的数量根据实际需求来定，但考虑到之后要在每个 CheckBox 上添加逻辑事件，所以建议不论多少只需拿 3

个来做示例就可以了。

为［select-all］添加 OnClick 事件，并为其设置 is checked of 的 value 为 ture

时作为触发条件。

添加动作：

1. Set Variable / Widget value，将

［checkbox-1］［checkbox-2］［checkbox-3］的 value 设置为 ture。

2. Set Panel state to State，将［switch］的 State 改为［cancel］。

3. Set Variable / Widget value，将［select-none］的 value 设置为

ture。

同理，用相反的规则对［select-none］添加 OnClick 事件，完成后的事件列表如下：

接下来为［checkbox-1］添加 OnClick 事件，并为其分别设置 a / b 两个触发条件：

a.［checkbox-1］［checkbox-2］［checkbox-3］is checked of 的 value 为

ture。

即若三项都被单独选中，则需要将［switch］的 State 改为［cancel］。

b.［checkbox-1］is checked of 的 value 为 falsh。

即若有任意一项取消了选择，则需要将［switch］的 State 改为［select］。

对条件 a 添加动作：

1. Set Panel state to State，将［switch］的 State 改为［cancel］。

2. Set Variable / Widget value，将［select-none］的 value 设置为

ture。

对条件 b 添加动作：

1. Set Panel state to State，将［switch］的 State 改为［select］。

2. Set Variable / Widget value，将［select-all］的 value 设置为

false。

搞定收工，如果是分别用两个 Button

来进行控制，只要将这个例子中的［select-all］和［select-none］单独提出来就可以了。