微信小程序里关于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]),
    });
  },
})

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

相关推荐
逾明35 分钟前
Electron自定义菜单栏及Mac最大化无效的问题解决
前端·electron
辰九九40 分钟前
Uncaught URIError: URI malformed 报错如何解决?
前端·javascript·浏览器
月亮慢慢圆40 分钟前
Echarts的基本使用(待更新)
前端
芜青1 小时前
实现文字在块元素中水平/垂直居中详解
前端·css·css3
useCallback1 小时前
Elpis全栈项目总结
前端
小高0071 小时前
React useMemo 深度指南:原理、误区、实战与 2025 最佳实践
前端·javascript·react.js
LuckySusu1 小时前
【js篇】深入理解类数组对象及其转换为数组的多种方法
前端·javascript
LuckySusu1 小时前
【js篇】数组遍历的方法大全:前端开发中的高效迭代
前端·javascript
LuckySusu1 小时前
【js篇】for...in与 for...of 的区别:前端开发中的迭代器选择
前端·javascript
mon_star°1 小时前
有趣的 npm 库 · json-server
前端·npm·json