亲爱的小伙伴，在您浏览之前，烦请关注一下，在此深表感谢！
课程主题：复选框全选反选取消制作
主要内容：点击复选框，实现列表数据项全选选中、反选和取消选中效果
应用场景：多项选定、一键全选、一键取消、一键反选
案例展示：
案例视频
复选框演示视频
正文内容：实现复选框点击全选/取消全选；实现下拉弹窗一键全选、一键反选、全部取消。
1、复选框点击全选/取消全选
步骤一：拖入复选框并命名为中继器外复选框，提示信息“选择”，下箭头icon；在中继器中添加复选框，并命名中继器内复选框；命名的目的是下一步做交互时好辨识。
步骤二：添加中继器外复选框的交互，选中时——两个复选框值为真，取消选中时——两个复选框值为假；
2、实现下拉弹窗一键全选、一键反选、全部取消
步骤一：制作弹窗，包含弹窗背景、一键全选、一键反选、全部取消元件；组合命名为“选择弹窗”，载入时隐藏这个弹窗；
步骤二：添加下箭头交互，单击时——切换选择弹窗可见性；
步骤三：添加一键全选交互，全选时内外复选框的值均为真；
步骤四：添加一键反选交互，反选时外部复选框值为假，内部复选框可能有选中的项，所以要选择切换；
步骤五：添加全部取消交互，值全部为假；
本课小结：掌握复选框相关知识点，真、假、切换三种值的内涵；选中时与取消选中时如何选择值，以及用户体验交互设计，如何让用户用的舒服和方便。
相关课程直通车：
中继器实现时间读取和修改-CSDN博客
Axure横向菜单高级交互-CSDN博客
Axure垂直菜单展开与折叠-CSDN博客
Axure树形菜单展开与折叠-CSDN博客
如有其他相关问题，欢迎私信沟通，关注 结构化知识课堂-CSDN博客
明天的产品大咖就是你，创作不易，麻烦关注一下，点赞+收藏，感谢大家！
本文转载自: https://blog.csdn.net/benleiqiang/article/details/142996151
版权归原作者 结构化知识课堂 所有， 如有侵权，请联系我们删除。
版权归原作者 结构化知识课堂 所有， 如有侵权，请联系我们删除。