复选框的［全选］与［取消］是比较常见的一种交互事件，常用于对于某列表的批量编辑，形式一般来说有两种，早前常见的是通过［全选］和［取消］两个 Button 来完成对于 CheckBox 的控制，现在更多见的是只通过对一个 CheckBox 的开关式操作来完成，这次实例带来的就是对于后者在 Axure 中的实现方法。

http://s8/mw690/620eb3b2gx6CefxnLLx37&690实例 － 复选框的全选 & 取消（转）" TITLE="Axure 实例 － 复选框的全选 & 取消（转）" />

要求：
1、将一个 CheckBox 控件做为控制开关，即该项选中则实现对于其它复选框的［全选］操作，取消选中则实现对于其它复选框的［取消］操作。
2、作为开关的 CheckBox 在［全选］和［未选］时要有状态提示。
2、对任意复选框进行［选择］与［取消］的操作都会影响做为开关 CheckBox 的状态。

由于对做为开关的 CheckBox 要有状态提示，所以这里需要通过动态面板来实现。拖一个 Dynamic Panel 到页面，命名为［switch］，在其中建两个 State，分别命名为［select］［cancel］，在［select］中放置用于［全选］的 CheckBox，命名为［select-all］，在［cancel］中放置用于［取消］的 CheckBox，命名为［select-none］。

http://s1/mw690/620eb3b2gx6CefzCXao10&690实例 － 复选框的全选 & 取消（转）" TITLE="Axure 实例 － 复选框的全选 & 取消（转）" />

再拖三个 CheckBox 到页面，分别命名为［checkbox-1］［checkbox-2］［checkbox-3］，这里 CheckBox 的数量根据实际需求来定，但考虑到之后要在每个 CheckBox 上添加逻辑事件，所以建议不论多少只需拿 3 个来做示例就可以了。

为［select-all］添加 OnClick 事件，并为其设置 is checked of 的 value 为 ture 时作为触发条件。

http://s6/mw690/620eb3b2gx6CefBFnx305&690实例 － 复选框的全选 & 取消（转）" TITLE="Axure 实例 － 复选框的全选 & 取消（转）" />

添加动作：
1. Set Variable / Widget value，将 ［checkbox-1］［checkbox-2］［checkbox-3］的 value 设置为 ture。

http://s2/mw690/620eb3b2gx6CefCPpMl81&690实例 － 复选框的全选 & 取消（转）" TITLE="Axure 实例 － 复选框的全选 & 取消（转）" />

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

http://s2/mw690/620eb3b2gx6CefDZsfD61&690实例 － 复选框的全选 & 取消（转）" TITLE="Axure 实例 － 复选框的全选 & 取消（转）" />

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

http://s14/mw690/620eb3b2gx6CefF6SqV5d&690实例 － 复选框的全选 & 取消（转）" TITLE="Axure 实例 － 复选框的全选 & 取消（转）" />

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

http://s2/mw690/620eb3b2gx6CefHv0Lnd1&690实例 － 复选框的全选 & 取消（转）" TITLE="Axure 实例 － 复选框的全选 & 取消（转）" />

http://s7/mw690/620eb3b2gx6CefI9hGe96&690实例 － 复选框的全选 & 取消（转）" TITLE="Axure 实例 － 复选框的全选 & 取消（转）" />

接下来为［checkbox-1］添加 OnClick 事件，并为其分别设置 a / b 两个触发条件：
a.［checkbox-1］［checkbox-2］［checkbox-3］is checked of 的 value 为 ture。
即若三项都被单独选中，则需要将［switch］的 State 改为［cancel］。

http://s11/mw690/620eb3b2gx6CefJOvmaba&690实例 － 复选框的全选 & 取消（转）" TITLE="Axure 实例 － 复选框的全选 & 取消（转）" />

b.［checkbox-1］is checked of 的 value 为 falsh。
即若有任意一项取消了选择，则需要将［switch］的 State 改为［select］。

http://s11/mw690/620eb3b2gx6CefL1WQi1a&690实例 － 复选框的全选 & 取消（转）" TITLE="Axure 实例 － 复选框的全选 & 取消（转）" />

对条件 a 添加动作：
1. Set Panel state to State，将［switch］的 State 改为［cancel］。

http://s7/mw690/620eb3b2gx6CefMsuAC16&690实例 － 复选框的全选 & 取消（转）" TITLE="Axure 实例 － 复选框的全选 & 取消（转）" />

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

http://s15/mw690/620eb3b2gx6CefNJQzsae&690实例 － 复选框的全选 & 取消（转）" TITLE="Axure 实例 － 复选框的全选 & 取消（转）" />

对条件 b 添加动作：
1. Set Panel state to State，将［switch］的 State 改为［select］。

http://s8/mw690/620eb3b2gx6CefP4gqb47&690实例 － 复选框的全选 & 取消（转）" TITLE="Axure 实例 － 复选框的全选 & 取消（转）" />

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

http://s7/mw690/620eb3b2gx6CefT62QSb6&690实例 － 复选框的全选 & 取消（转）" TITLE="Axure 实例 － 复选框的全选 & 取消（转）" />

http://s9/mw690/620eb3b2gx6CefUxUVOf8&690实例 － 复选框的全选 & 取消（转）" TITLE="Axure 实例 － 复选框的全选 & 取消（转）" />

http://s4/mw690/620eb3b2gx6CefUBRTl33&690实例 － 复选框的全选 & 取消（转）" TITLE="Axure 实例 － 复选框的全选 & 取消（转）" />

http://s6/mw690/620eb3b2gx6CefUEQzH55&690实例 － 复选框的全选 & 取消（转）" TITLE="Axure 实例 － 复选框的全选 & 取消（转）" />

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