newheader
手机登录
账密登录
验证码图片
登录
还没有账号? 马上注册
手机登录
账密登录
验证码图片
忘记密码?
登录
还没有账号? 马上注册
欢迎注册陪学网账号
已经有账号? 马上登录
用中继器实现简单的全选效果
陪学
2017-12-04 04:40:07
606
0
通过中继器实现全选和取消全选,只是展示中继器的优势,我们可以对这个简单的全选和取消全选的案例进行扩展,再去考虑反选、取消单个勾选等其它效果。

       这里我们只是实现简单的全选和取消全选的效果,没有去考虑反选、取消单个勾选等其它效果。 其它的效果是在这个案例的基础上进行完善,所以这里我们就来看看怎么制作全选和取消全选。

       中继器在实现这个全选上有得天独厚的优势,可以用中继器和复选框相结合制作选项,如下图。

       然后用复选框制作全选按钮,设置全选按钮上的交互。选中时,设置中继器中的选项选中;未选中时,设置中继器中的选项未选中。


       我们知道了全选和取消全选的做法之后,就能在这个的基础上再对这个效果进行进一步的完善,例如反选、单个勾选取消全选等等。后面我们将会和大家一起,对这个案例进行完善。先到这里,拜拜!!

长按二维码或加微信pexuepexue
进陪学产品交流群回复:资料分享
免费获取资料:每日更新 免费课程、学习资料、报告、招聘面试
标签:
登录 后参与讨论
发表
全部评论
没有更多评论了
newfooter
陪学网专注于产品管理类课程的开发与制作,
志在为产品经理、交互设计、平面设计、需求人员分享最新、最好的产品类课程。
陪学网:陪伴学习、陪伴成长
粤ICP备18075915号