小程序实现复选框全选和取消全选

页面逻辑是,在小程序复选框列表页面上单独放一个复选框用于全选(设置class为position: fixed;即可固定在页面上),当点击全选时,页面所有复选框都会勾上,再次点击后页面所有复选框的打√都会取消。
在这里插入图片描述
思路很简单,因为每条数据加了checked属性,因此复选框“全选”通过bindchange监听变化即可。当用户点击“全选”打勾时,通过check-group的bindchange函数对每条数据的checked属性赋值true,取消全选即全部赋为false,赋值方法使用setData实现页面更新。

wxml:
在这里插入图片描述
js:
data:
在这里插入图片描述
bindchange函数:
在这里插入图片描述
注:虽然res.detail.value是字符串类型,但由于等值符==的类型转换,会自动转换成数字进行比较。

个人踩坑有:(个人记录,可不看)
因为数据并不是写死的,而是数据库里读出来的。一开始思路很清晰,但是就是实现不了,报的错也只是某个参数无定义,排查不出问题来。而查阅的其他人的博客又对比不出问题,云里雾里地绕了半天。
一开始以为每点击一下刷新页面要重新交互一下后台获取数据,其实不用,setData就可以实现页面刷新。另一个问题是,checkgroup的bindchange函数只能传递字符串,因此在data内需定义一个属性allCheck保存“全选”框的状态值,但不知道为啥打印出来的allCheck都是默认值,但还是能成功实现if的判断,这点我确实想不通…
在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值