Axure 多选和取消多选

实现的效果1：页面中，默认为全部选中状态，单击一次，取消全选；单击二次，再次全选，来回切换；效果1如下：

 

 

如果要实现效果2：打开页面，默认全部未选中，点击后全部选中，再次点击，全部不选中，则可以将方框默认设置为蓝色底，然后选中效果中，白色填充即可；效果2如下：

默认打开效果-----------------------------------------------单击一次效果-------------------------------------二次单击效果

 

下面是按照第一个效果来进行讲解；

第一步：绘制选择框；Axure中，设置三个多选框；多选组合命名55，选项一组合命名51，选项二组合命名52；

我这里是一个方框，里面一个白色对号，通过设置选中后方框蓝色填充，来区分是否选中；效果1，多选框默认为白色底色，效果2默认为蓝色底色；

 

 第二步：三个图标，设置用例为【鼠标单击时】-选中状态为【toggle】，单击切换选中状态；

  用例添加示例如下；设置选中后 则单击切换选中状态；

第三部：设置【选中】时，填充蓝色；；操作如下；效果1，选中则填充蓝色；效果2，选中则填充白色；

 

这个时候生成的页面中，效果是展示为默认选中状态，首次单击没反应，再次点击，取消选中效果生效；这里为什么会有一次单击无效呢？

第四步：这里需要把整个图标，设置为选中情况；这个设置完后，就完全符合，打开页面，蓝色填充效果，展示为预期的选中效果，单击后，蓝色填充物，展示未取消选中效果；可正常切换；

；，

 注意：多个多选框，则每个多选框都需要设置以上内容；鼠标单击-切换选中状态（toggle），效果1：设置选中状态的样子蓝色填充（原图为无底色），设置为默认选中状态；效果2：设置选中状态为白色填充（原图为蓝色底），设置为默认选中效果；

 三个选择框的设置到此就完成了，现在对控制全选按钮进行条件编辑设置；

-------------------------------------------------这里是一些原因的说明---------------------------------------------------------------------------------------------------

首先梳理一下鼠标单击后的用例关系，当全选框为选中状态，则选项一和选项二都为选中状态；当全选框切换为取消选中，则选项一和选项二都为取消选中状态；

这里注意，在case1和case2里，都必须设置一下选中状态切换的动作；且这个动作需要再用例的第一顺位，否则不生效；

但是，这样操作后发现，在页面中，页面展示为默认全部选中的状态；如下

默认页面效果----------------------------------------------单击第一次------------------------------------------------单击第二次

 

这个与预期不符；

原因是，设置选中效果与切换效果之间叠加后，导致的效果反了；

第一次单击，执行case1，切换选中状态1【选中】-2【不选中】，此时第一次单击，切换成了选中状态1，但是展现效果是不填充；

选项一和选项二判断【全选】状态为ture，则执行也是ture，则保持不变；

单击第二次，toggle的效果，是2【不选中】，也就是fasle，执行case2，因此全选为选中的样子，选项一和选项二执行case2，都更改为fasle；

这里可能有点绕，回头会整理出更容易理解的说法补充上来；

这个时候，将条件设置的反过来，效果就对了；

默认打开效果----------------------------------------------单击一次效果----------------------------------------------二次单击效果

 

第五步： 或者可以直接参考下面的用例内容；出来的效果就是正常的；

这个时候，效果就对了；