Axure 9复选框动态全选和取消全选

初学设计原型时,不可避免地遇到了复选框全选和取消全选的问题,在网上找了下,大都用的动态面板实现,我觉得有点复杂,不太容易理解,于是,我按自己的理解做出了如下效果:

复选框动态全选和取消全选

先看下整体逻辑:

1. 选中【全选】时,项下复选框自动选中;取消选中【全选】时,项下复选框自动取消选中。

2. 相反的,不动【全选】复选框,当项下复选框全部选中时,【全选】复选框自动选中;当项下复选框全部取消选中时,【全选】复选框自动取消选中。

虽然整体逻辑并不复杂,但由于checkbox并没有选项组的概念,因此,需要自己写逻辑。

具体实现步骤如下:

1). 将所有checkbox设置为组合,方便全选和取消全选操作。

2). 为【全选】checkbox设置选中和取消选中事件,实现了整体逻辑1的效果。

全选事件

这里引入了全局变量count,用于计算页面上选中了几个选项,count的初始值为0。

3)为每个选项设置选中和取消事件,结合全局变量count,实现整体逻辑2的效果。

选项事件

上述实现方法,逻辑比较简单,便于初学者理解。

版权声明:
作者:cc
链接:https://www.techfm.club/p/60862.html
来源:TechFM
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>