【微信小程序】实现复选框chebox勾选验证

功能展示

 未选中点击按钮

选中点击按钮

实现逻辑

1. 获取checkbox的value值并绑定事件

2. 将获取到的value值与定义的数据关联

3. 当点击按钮是判断是否勾选，为true则验证通过，false则相反

 代码实现

wxml

<checkbox checked="{{checkboxValue}}"  bindtap="handleCheckboxChange">我同意相关条款</checkbox>
<button bindtap="validateCheckbox">提交</button>

js

Page({
  data: {
    // 默认定义为false
    checkboxValue: false
  },
  
  // 复选框
  handleCheckboxChange(event) {
    console.log('this.data.checkboxValue ==> ' , this.data.checkboxValue);
    this.setData({
      // 点击之后进行取反
      checkboxValue : !this.data.checkboxValue
    })

  },
  
  // 登录按钮
  validateCheckbox() {
   
    
    if (this.data.checkboxValue) {
      // 复选框已勾选
      // 执行需要的操作
      wx.showToast({
        title: '复选框已勾选！'
      });
      
    } else {
      // 复选框未勾选
      // 执行需要的操作
      wx.showToast({
        title: '请先勾选复选框！',
        icon: 'none'
      });
    }
  }
});