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。

同理,对[checkbox-2][checkbox-3]添加 OnClick 事件,完成后的事件列表如下:

搞定收工,如果是分别用两个 Button 来进行控制,只要将这个例子中的[select-all]和[select-none]单独提出来就可以了。