完美解决微信小程序使用复选框van-checkbox无法选中

由于小程序使用了vant-ui框架,导致checkbox点击无法选中问题

html 复制代码
<van-checkbox value="{{ checked }}" shape="square">
          <view class="check-content">
            <view class="checktext">我已阅读并同意>《用户协议》《隐私政策》</view>
          </view>
</van-checkbox>

记得定义checked 默认值

解决办法 :添加onChange事件,给checked 做赋值操作。

html 复制代码
<van-checkbox value="{{ checked }}" shape="square" bind:change="onChange">
          <view class="check-content">
            <view class="checktext">我已阅读并同意《用户协议》《隐私政策》</view>
          </view>
</van-checkbox>
javascript 复制代码
onChange(e){
    this.setData({
      checked: e.detail
    })
},

可以打印看看console.log(e)

  • 选中效果:
  • 取消选中效果:
相关推荐
哈哈O哈哈哈20 小时前
ECMAScript 2025 正式发布:10 个让你眼前一亮的 JavaScript 新特性!
前端·javascript
哈哈O哈哈哈20 小时前
2025 年值得关注的 CSS 新属性与功能
前端·css
我叫张小白。20 小时前
TypeScript泛型进阶:掌握类型系统的强大工具
前端·javascript·typescript
麦麦在写代码20 小时前
前端学习4
前端·学习
你听得到1120 小时前
Web前端们!我用三年亲身经历,说说从 uniapp 到 Flutter怎么转型的,这条路我爬过,坑我踩过
前端·flutter·uni-app
葡萄城技术团队20 小时前
在数据录入、指标补录、表单填报场景中,SpreadJS 具备哪些优势和价值
前端
孟陬20 小时前
AI 每日心得——AI 是效率杠杆,而非培养对象
前端
3秒一个大20 小时前
JavaScript 中的 Symbol:特性与实战应用
javascript
漆黑骑士21 小时前
Web Component
前端
San3021 小时前
深入理解 JavaScript 事件机制:从事件流到事件委托
前端·javascript·ecmascript 6