Axure复选框全选反选取消高级交互

亲爱的小伙伴,在您浏览之前,烦请关注一下,在此深表感谢!

课程主题:复选框全选反选取消制作

主要内容:点击复选框,实现列表数据项全选选中、反选和取消选中效果

应用场景:多项选定、一键全选、一键取消、一键反选

案例展示:

案例视频

复选框演示视频


正文内容:实现复选框点击全选/取消全选;实现下拉弹窗一键全选、一键反选、全部取消。

1、复选框点击全选/取消全选

步骤一:拖入复选框并命名为中继器外复选框,提示信息"选择",下箭头icon;在中继器中添加复选框,并命名中继器内复选框;命名的目的是下一步做交互时好辨识。

步骤二:添加中继器外复选框的交互,选中时------两个复选框值为真,取消选中时------两个复选框值为假;

2、实现下拉弹窗一键全选、一键反选、全部取消

步骤一:制作弹窗,包含弹窗背景、一键全选、一键反选、全部取消元件;组合命名为"选择弹窗",载入时隐藏这个弹窗;

步骤二:添加下箭头交互,单击时------切换选择弹窗可见性;

步骤三:添加一键全选交互,全选时内外复选框的值均为真;

步骤四:添加一键反选交互,反选时外部复选框值为假,内部复选框可能有选中的项,所以要选择切换;

步骤五:添加全部取消交互,值全部为假;

本课小结:掌握复选框相关知识点,真、假、切换三种值的内涵;选中时与取消选中时如何选择值,以及用户体验交互设计,如何让用户用的舒服和方便。


相关课程直通车:

中继器实现时间读取和修改-CSDN博客

Axure横向菜单高级交互-CSDN博客

Axure垂直菜单展开与折叠-CSDN博客

Axure树形菜单展开与折叠-CSDN博客

如有其他相关问题,欢迎私信沟通,关注 结构化知识课堂-CSDN博客

明天的产品大咖就是你,创作不易,麻烦关注一下,点赞+收藏,感谢大家!

相关推荐
结构化知识课堂1 天前
Axure产品原型设计:AI能画原型了,为什么你还得懂这些术语?
人工智能·axure·原型设计·ai产品经理
白山编程大哥1 天前
把 AO 接回来:黑线和白底之间到底差了多少
交互
程序猿追2 天前
漏字、换词序、空查询:用 FuzzyKot 做一次鸿蒙搜索交互排查
华为·交互·harmonyos
anew___2 天前
《从零手写操作系统 (41):用户态Shell与Init进程——从内核到交互界面》
交互
曦夜日长3 天前
Git系统篇,Git远程仓库(三):本地仓库与远程仓库的交互
linux·服务器·网络·git·交互
言乐64 天前
HTML实现Word、Excel、PPT三种可切换背景,可键盘打字、和像素小人交互
html·word·powerpoint·excel·交互
会议咨询5 天前
2026年交互设计、计算机视觉与数字化技术国际会议(ICDT 2026)
人工智能·计算机视觉·交互
工业HMI实战笔记5 天前
优化工业HMI报警提示只需4步
性能优化·交互·设计语言
xy34535 天前
Axure 9.0 动态面板基本操作
前端·ui·html·axure·原型·产品设计
元岳数字人小元5 天前
数字人私有化部署:企业级AI数字场景长效落地优选方案
运维·人工智能·开源·人机交互·交互