axure商城

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

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

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

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

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

先看下整体逻辑:

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

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

 

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

具体实现步骤如下:

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

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

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

全选事件

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

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

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

选项事件

 

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

给TA打赏
共{{data.count}}人
人已打赏
基础教程

【Axure 教程】动态面板的救赎

2023-6-17 16:40:43

基础教程

如何将Sketch内容导入Axure RP

2023-11-28 10:01:01

axure商城
10 条回复 A文章作者 M管理员
  1. ing183116

    取消其中一个,但是他全取消了

  2. Ncery

    新的思路,赞~

  3. 焦个朋友🐰

    选择了所有的,但是,全部选的不会自动变为真,麻烦您帮看看

    • 逐魂

      同样有这样的问题,下面都选了,全选那个没反应

    • soul174021

      把情境中的Else if右键选择更改为if就行了

  4. 难如上青天

    情形的判断条件“if 真” 是哪个选项?

    • Nell168007

      添加情形,不选择情形的条件就行了。如果不是排他条件,就右键,选择【切换为如果或否则】。

  5. 黄老师
    黄老师给作者打赏了¥5
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索