完美解决微信小程序使用复选框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)

  • 选中效果:
  • 取消选中效果:
相关推荐
Mintopia11 分钟前
🚀 顶点-面碰撞检测之诗:用牛顿法追寻命运的交点
前端·javascript·计算机图形学
wb18917 分钟前
企业WEB应用服务器TOMCAT
运维·前端·笔记·tomcat·云计算
烛阴29 分钟前
解锁 Gulp 的潜力:高级技巧与工作流优化
前端·javascript
Entropy-Lee1 小时前
JavaScript 语句和函数
开发语言·前端·javascript
Wcowin2 小时前
MkDocs文档日期插件【推荐】
前端·mkdocs
xw53 小时前
免费的个人网站托管-Cloudflare
服务器·前端
网安Ruler3 小时前
Web开发-PHP应用&Cookie脆弱&Session固定&Token唯一&身份验证&数据库通讯
前端·数据库·网络安全·php·渗透·红队
!win !3 小时前
免费的个人网站托管-Cloudflare
服务器·前端·开发工具
饺子不放糖3 小时前
基于BroadcastChannel的前端多标签页同步方案:让用户体验更一致
前端
饺子不放糖3 小时前
前端性能优化实战:从页面加载到交互响应的全链路优化
前端