checkbox怎么在微信小程序中使用

checkbox怎么在微信小程序中使用？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

type_add.js

// pages/detail_add/detail_add.js Page({  /**   * 页面的初始数据   */  data: {   selectData: "", //下拉列表的数据   height: 20,   focus: false  },  checkboxChange: function(e) {   console.log('checkbox发生change事件，携带value值为：', e.detail.value)   console.log("长度:" + e.detail.value.length);   this.setData({    typeId: e.detail.value,    length: e.detail.value.length   })  },  formSubmit: function(e) {   console.log('form发生了submit事件，携带数据为：' + e.detail.value.amount + ", " + e.detail.value.typeId + ", " + this.data.remark + ", " + this.data.date + ", " + this.data.time);   var amount = e.detail.value.amount;   var typeId = this.data.typeId;   var date = this.data.date;   var time = this.data.time;   var remark = e.detail.value.remark;   var createDate = date + " " + time;   var length = this.data.length;   console.log("length:" + length);   console.log("date:" + date);   console.log("time:" + time);   console.log("createDate:" + createDate)   if (amount == null || amount == "") {    wx.showToast({     title: "支出金额不能为空",     icon: 'none',     duration: 1500    })   } else if (typeId == null || typeId == "") {    wx.showToast({     title: "支出类型不能为空",     icon: 'none',     duration: 1500    })   } else if (length >= 2) {    wx.showToast({     title: "支出类型只能选择一种",     icon: 'none',     duration: 1500    })   } else if (date == null || date == "") {    wx.showToast({     title: "日期不能为空",     icon: 'none',     duration: 1500    })   } else if (time == null || time == "") {    wx.showToast({     title: "时间不能为空",     icon: 'none',     duration: 1500    })   } else if (remark == null || remark == "") {    wx.showToast({     title: "备注不能为空",     icon: 'none',     duration: 1500    })   } else {    wx.request({     url: getApp().globalData.urlPath + "spendingDetail/add",     method: "POST",     data: {      amount: amount,      typeId: typeId,      createDate: createDate,      remark: remark     },     header: {      "Content-Type": "application/x-www-form-urlencoded"     },     success: function(res) {      console.log(res.data.code);      if (res.statusCode == 200) {       //访问正常       if (res.data.code == "000000") {        wx.showToast({         title: "添加支出详情成功",         icon: 'success',         duration: 3000,         success: function() {          wx.navigateTo({           url: '../detail/detail'          })         }        })       }      } else {       wx.showLoading({        title: '系统异常',        fail       })       setTimeout(function() {        wx.hideLoading()       }, 2000)      }     }    })   }  },  formReset: function() {   console.log('form发生了reset事件')  },  bindDateChange: function(e) {   console.log('picker发送选择改变，携带值为', e.detail.value)   this.setData({    date: e.detail.value   })  },  bindTimeChange: function(e) {   console.log('picker发送选择改变，携带值为', e.detail.value)   this.setData({    time: e.detail.value   })  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function(options) {   wx.setNavigationBarTitle({    title: "添加支出详情"   })   var userCode = wx.getStorageSync('userId').toString();   var self = this;   wx.request({    url: getApp().globalData.urlPath + "spendingType/types", //json数据地址     data: {     userCode: userCode    },    headers: {     "Content-Type": "application/x-www-form-urlencoded"    },    success: function(res) {     console.log("res.data.data.typeName:" + res.data.data)     self.setData({      selectData: res.data.data     })    }   })  },  /**   * 生命周期函数--监听页面初次渲染完成   */  onReady: function() {  },  /**   * 生命周期函数--监听页面显示   */  onShow: function() {  },  /**   * 生命周期函数--监听页面隐藏   */  onHide: function() {  },  /**   * 生命周期函数--监听页面卸载   */  onUnload: function() {  },  /**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh: function() {  },  /**   * 页面上拉触底事件的处理函数   */  onReachBottom: function() {  },  /**   * 用户点击右上角分享   */  onShareAppMessage: function() {  } })

type_add.wxml:

<form bindsubmit="formSubmit" bindreset="formReset">  <view class="section">   <text>支出金额</text>   <input name="input" name="amount" placeholder="请输入支出金额" />  </view>  <view class="section">   <text>支出类型</text>   <checkbox-group bindchange="checkboxChange">    <label class="checkbox" wx:for="{{selectData}}">     <checkbox value="{{item.typeId}}" checked="{{item.checked}}" />{{item.typeName}}    </label>   </checkbox-group>  </view>  <view>   <text>创建时间</text>   <view class="section">    <picker mode="date" value="{{date}}" start="2018-09-01" end="2030-09-01" bindchange="bindDateChange">     <view class="picker">      选择日期: {{date}}     </view>    </picker>   </view>   <view class="section">    <picker mode="time" value="{{time}}" start="00:00=" end="23:59" bindchange="bindTimeChange">     <view class="picker">      选择时间: {{time}}     </view>    </picker>   </view>  </view>  <view class="section">   <text>备注</text>   <input name="input" name="remark" placeholder="请输入备注" />  </view>  <view>   <text>\n</text>  </view>  <view class="btn-area">   <button form-type="submit">提交</button>   <view>    <text>\n</text>   </view>   <button form-type="reset">重置</button>  </view> </form>

bindchange=”checkboxChange” 相当于js中的onchange事件。

上述中的form表单基本就是参考官方文档改的。

有一段代码还是要提一下:

self.setData({   selectData: res.data.data  })

self其实相当于this，意为当前。每次触发事件，对应的值都会进行存储，用于与后台通信进行数组传递，

type_add.wxss:

/* pages/login/login.wxss */ form{  width: 310px;  height: 240px;  line-height: 40px;  /* border: 1px solid red; */ } input{  border: 1px solid #ccc;  width: 310px;  height: 40px; } .button{  margin-top: 20px; } .header text{  font-size: 25px;  color: #666; } form text{  font-size: 20px;  color: #666; }

关于checkbox怎么在微信小程序中使用问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。