微信小程序之使用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.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 + .data.time);

    var amount = e.detail.value.amount;
    var typeId = .data.typeId;

    var date = .data.date;
    var time = .data.time;
    var remark = e.detail.value.remark;
    var createDate = date + "  time;
    var length = .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: 支出金额不能为空"none1500
      })
    } else if (typeId == null || typeId == 支出类型不能为空
      })

    } if (length >= 2支出类型只能选择一种if (date == null || date == 日期不能为空if (time == null || time == 时间不能为空if (remark == null || remark == 备注不能为空else {



      wx.request({

        url: getApp().globalData.urlPath + spendingDetail/addPOSTContent-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: 添加支出详情成功success3000../detail/detail
                  })
                }
              })

            }
          }  {

            wx.showLoading({
              title: 系统异常2000)
          }

        }
      })
    }


  },formReset: function() {
    console.log(form发生了reset事件)
  },bindDateChange: function(e) {
    console.log(picker发送选择改变，携带值为.setData({
      date: e.detail.value
    })
  },bindTimeChange: function(e) {
    console.log(.setData({
      time: e.detail.value
    })
  },*
   * 生命周期函数--监听页面加载
   
  onLoad: function(options) {
    wx.setNavigationBarTitle({

      title: 添加支出详情

    })


    var userCode = wx.getStorageSync(userId).toString();
    var self = ;
    wx.request({
      url: getApp().globalData.urlPath + spendingType/types",1)">json数据地址 
      data: {
        userCode: userCode
      },headers: {
        
      },success: function(res) {
        console.log(res.data.data.typeName: res.data.data)

        self.setData({

          selectData: res.data.data

        })


      }
    })
  },1)">*
   * 生命周期函数--监听页面初次渲染完成
   
  onReady: function() {

  },1)">*
   * 生命周期函数--监听页面显示
   
  onShow: function() {

  },1)">*
   * 生命周期函数--监听页面隐藏
   
  onHide: function() {

  },1)">*
   * 生命周期函数--监听页面卸载
   
  onUnload: function() {

  },1)">*
   * 页面相关事件处理函数--监听用户下拉动作
   
  onPullDownRefresh: function() {

  },1)">*
   * 页面上拉触底事件的处理函数
   
  onReachBottom: function() {

  },1)">*
   * 用户点击右上角分享
   
  onShareAppMessage: function() {

  }
})

type_add.wxml:

<form bindsubmit=formSubmit" bindreset=formReset">
  <view class=section">
    <text>支出金额</text>
    <input name=input" name=amount" placeholder=请输入支出金额" />
  </view>

  <view ">
    <text>支出类型</text>
    <checkbox-group bindchange=checkboxChange">
      <label checkbox" wx:for={{selectData}}">
        <checkbox value={{item.typeId}}" checked={{item.checked}}" />{{item.typeName}}
      </label>
    </checkbox-group>

  </view>

  <view>
    <text>创建时间</text>
    <view ">
      <picker mode=date" value={{date}}" start=2018-09-01" end=2030-09-01" bindchange=bindDateChange">
        <view picker">
          选择日期: {{date}}
        </view>
      </picker>
    </view>
    <view time{{time}}00:00=23:59bindTimeChange
          选择时间: {{time}}
        </view>
      </picker>
    </view>
  </view>
  <view ">
    <text>备注</text>
    <input name=remark请输入备注" />
  </view>
  <view>
    <text>\n</text>
  </view>
  <view 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: #;
}