微信小程序里关于checkbox的坑

需求背景

小程序项目内,需要添加一个checkbox,用来判断用户是否同意某种协议。

遇到的坑

我只打算使用一个checkbox,而非checkbox-group,最初给checkbox添加bindchange属性,却无任何反应。通过查看官网才知晓,checkbox只有bindtap,我又将bindtap函数里的事件参数打印出来,却发现没有一个字段能表示是否勾选。

官网上说checkbox添加checked属性值,我按照如下方式加了:

js 复制代码
<checkbox checked="{{ isChecked }}" />

Page({
  data: {
      isChecked: false,
  },
})

checkbox已经勾选了,isChecked的值却仍然是false,很明显,它不是响应式的。

万般无奈的解决办法

无奈之下,我只能使用checkbox-group,给它绑定bindchange事件,代码如下所示:

js 复制代码
<checkbox-group bindchange="handleChange">
    <checkbox value="{{ isChecked }}" />
</checkbox-group>

Page({
  data: {
      isChecked: false,
  },
  handleChange(e) {
    this.setData({
      isChecked: Boolean(e.detail.value[0]),
    });
  },
})

这种感觉,有点尴尬,就像你本来只准备用一把普通刀杀鸡,结果呢,别人非得让你用牛刀来杀,好生别扭!

相关推荐
DFT计算杂谈6 分钟前
VASP+Wannier90 计算位移电流和二次谐波SHG
java·服务器·前端·python·算法
zhougl99617 分钟前
Vue 中使用 WebSocket
前端·vue.js·websocket
无名的小白18 分钟前
openclaw使用nginx反代部署过程 与disconnected (1008): pairing required解决
java·前端·nginx
2601_9498574325 分钟前
Flutter for OpenHarmony Web开发助手App实战:文本统计
前端·flutter
光影少年33 分钟前
智能体UI ux pro max
前端·ui·ux
半梅芒果干35 分钟前
vue3 实现无缝循环滚动
前端·javascript·vue.js
qq_4198540540 分钟前
锚点跳转及鼠标滚动与锚点高亮联动
前端
冰敷逆向1 小时前
京东h5st纯算分析
java·前端·javascript·爬虫·安全·web
Java.慈祥1 小时前
速通-微信小程序 2Day
微信小程序·小程序·前端框架
Laurence1 小时前
从零到一构建 C++ 项目(IDE / 命令行双轨实现)
前端·c++·ide