checkbox多选框和radio一样在任何Web和APP应用中都非常常见，且形式更多样，我们所要实现的效果如下：
实现步骤如下：
1.从Sketch或AdobeXD导入设计内容，内容中分别包含多选内容框（触发图标）和选中效果框。
2.我们为“art-icon”添加触发效果：选中“art-icon”图层–选择“单击”触发器；
在“条件”下选择“透明度”–选择“rectangle-ART”图层–选择“透明度变至”–输入“100”或将滑动条滑至最右。
按照上述方法，添加“条件”当“rectangle-ART”图层的透明度“=”“100”时，设置“rectangle-ART”的透明度变至“0”。
通过以上操作，我们设置好了“ART”的选中/未选中切换效果。
完整的操作步骤如下：
特别注意：如果“rectangle-ART”图层在“art-icon”图层的上方，造成当“ART”为选中状态时，“rectangle-ART”遮盖掉“art-icon”，使得“art-icon”图层无法被触碰到，此时必须要选中“rectangle-ART”图层的“可触碰低层级图层”选项，才能得到正确的交互效果。
3.按照步骤2依次设置其他几个多选框的效果。
4.按照步骤2的方式，我们可以设置“ALL”的选中/未选中切换效果：同样的，我们添加条件“rectangle-ALL”的“透明度”“=”“0”的，将所有9个选中框的透明度设置为100；再添加条件“rectangle-ALL”的“透明度”“=”“100”时，将所有9个选中框的透明度设置为0。
5.至此，我们已经设置好了所有多选框的触发效果，可以在预览窗内查看实际效果了。
本文由@ROGER原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议
版权声明：本站所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流，不声明或保证其内容的正确性，如发现本站有涉嫌抄袭侵权/违法违规的内容。请举报，一经查实，本站将立刻删除。