实现的效果:点击 多选,则默认全选,再次点击,默认子项取消全选状态;
首先打开Axure,设置三个多选框;多选组合命名55,选项一组合命名51,选项二组合命名52;
我这里是一个方框,里面一个白色对号,通过设置选中后方框蓝色填充,来区分是否选中;
首先,给三个多选图标,设置用例为【鼠标单击时】-选中状态为【toggle】,单击切换选中状态;
用例添加示例如下;设置选中后 则单击切换选中状态;
设置【选中】时,填充蓝色;;操作如下;
这个时候生成的页面中,效果是展示未默认选中状态,单击没反应,再次点击,取消选中;这里为什么会有一次单击无效呢?
这里需要把整个图标,设置为选中情况;,这个设置完后,就完全符合,打开页面,默认选中,单击后,取消选中,再次点击,选中;
注意:多个多选框,则每个多选框都需要设置以上内容;鼠标单击-切换选中状态(toggle),设置选中状态的样子蓝色填充,设置为默认选中状态;
三个选择框的设置到此就完成了,现在对控制全选按钮进行条件编辑设置;
首先梳理一下鼠标单击后的用例关系,当全选框为选中状态,则选项一和选项二都为选中状态;当全选框切换为取消选中,则选项一和选项二都为取消选中状态;
这里注意,在case1和case2里,都必须设置一下选中状态切换的动作;且这个动作需要再用例的第一顺位,否则不生效;
但是,这样操作后发现,在页面中,页面展示为默认全部选中的状态;如下
点击全选
全选取消选中,但是选项一和选项二仍为选中状态;单击二次,全选选中,选项一和选项二为不选中状态;
这个与预期不符;
原因是,默认全选为选中状态,第一次单击,执行case1,切换选中状态,选中状态的切换是【选中】-【不选中】,此时第一次单击,切换成了选中状态,但是展现效果是不填充;
选项一和选项二判断【全选】状态为ture,则执行也是ture,则保持不变;
单击第二次,toggle的效果,是不选中,也就是fasle,但是展现效果是填充;选项一和选项二执行case2,都更改为fasle;
这里可能有点绕,回头会整理出更容易理解的说法补充上来;
这个时候,将条件设置的反过来,效果就对了;
默认打开效果----------------------------------------------单击一次效果----------------------------------------------二次单击效果
或者可以直接参考下面的用例内容;出来的效果就是正常的;