Axure 实例 - 单复选按钮联动

最近在做一个以[地区]为条件的筛选列表时,需要通过 Axure 实现其真实的交互效果,大致的效果如图所示,其中包含两种类型的选项,一种是 Radio Button[单选钮],另一种是 Checkbox[复选框]。

预览 | 下载

要求:
1、默认选中的项为[全国]。
2、选中下方任意一个地区项,则取消对于[全国]项的选择。
3、下方无任何地区项被选中时,则自动选中[全国]项。
4、地区项最多可选两项,若选满则将其余的复选框至为禁用状态。
5、在地区项选满的情况下取消选择其中任意一项,则恢复所有复选框为可用状态。
6、在地区项有任意项被选中的情况下选择[全国]项,则取消选择所有复选框,如果其中有禁用状态则更改为可用状态。

首选将所有的选项控件进行 Lable 命名:
[全国]:radio_button
[帝都][魔都][妖都]:checkbox-1 / checkbox-2 / checkbox-3

然后为 radio_button 添加 2 个 OnClick 事件:
Case 1:radio_button 当前值若为 true,则将所有的 checkbox 的值设为 false。

Case 2:radio_button 当前值若为 true,则将所有 checkbox 状态至为 enable 。

接着为 checkbox-1 添加 5 个 OnClick 事件:
Case 1:checkbox-1 当前值若为 true,则将 radio_button 的值设为 false。

Case 2:checkbox-1 与 checkbox-3 当前值若均为 true,则将 checkbox-2 状态至为 disable。

Case 3:checkbox-1 与 checkbox-2 当前值若均为 true,则将 checkbox-3 状态至为 disable。

Case 4:checkbox-1 当前值若为 false,则将 checkbox-2 和 checkbox-3 状态至为 enable。

Case 5:checkbox-1 / checkbox-2 / checkbox-3 当前值若均为 false,则将 radio_button 的值设为 true。

这里需要注意的是,由于这 5 个事件在条件上并不是连贯性的,所以要通过右键菜单中的 Toggle IF/ELSE IF 将每个事件变更为 if xxx,而不是默认的 else if xxx 。

对于 checkbox-2 / checkbox-3 的设置可以如法炮制,只要别选错 checkbox 就可以,建议对事件也进行命名,这样找起来会方便很多。

这个方法中唯一的麻烦在于,如果 checkbox 数量很多,那么对于 checkbox 中的 Case 2 和 Case 3 的判断则需要额外设置好多不同的组合,由于我对 Axure 中的条件设置和变量还不是很熟,所以不知道这种情况是否有更简单的方法来实现。