原型设计：[3]利用Axure实现复选框全选效果

在利用AXURE原型工具进行产品设计时，经常用到复选框的全选和取消全选的交互操作，缬方焱蜱一般选择复选框来着抹较氰控制选项全选中和全取消的效果，也可以用按钮或文字等其他作为开关来控制这种效果，下面主要介绍利用一个复选框控制选项全选中和全取消选中的效果

工具/原料

AXURERPPro6.5原型设计工具

基本设置

1、输入需要复选效果的文字，比如选择最适宜居住的城市，拖拽一个矩形，若干个复选按钮，其中一个复选框作为全选选项，然后给每一个复选框进行命名（为后面的设置变量值提供方便），如下：

设置全选中效果

1、首先选中“城市全选”复选框添加Onclick点击用例，用例命名“全选中效果”，然后给用例添加条件“if选中于城市全选等于：真”，如下图

2、然后在这个条件下添加动作，如果选中了“全选”，那么同时选中其他所有城市选项，选择设置变量/部件值>>打开设置编辑器>>依次设置其它所有城市复选框的值为真，点击确定，如下图

取消全选中效果

1、在“城市全选”复选框的Onclick点击事件下添加第二个用例“全不选效果”，条件设置为“Elseif选中于城市全选等于：假”，操作同栏目2中的步骤1

2、然后在上一步骤的条件下添加动作，如果取消选中“全选”，那么同时取消选中其他所有镰矽缠镖城市选项，选择设置变量/部件值>>打梯瓣氨割开设置编辑器>>依次设置其它所有城市复选框的值为假，点击确定，如下图：

3、全部设置完之后，预览原型，就可以实现全选和全不选效果了，如下图

4、如果利用其他组件，例如按钮组件，图形，文字等作为开关控制全选效果，设置步骤同上，只需要在添加用例时，替换本节中用于做控制开关的复选框“城市全选”即可