微信小程序自定义复选框

微信官方给的复选框太丑，想要样式多样需要我们自己定义

先来张效果图

wxml循环生成选框，从js里取数据，根据checked的值，改变标签的样式类

<view class="two {{showView?'hide':'show'}} the-label">
        <view class='list'>
          <block wx:for="{{items}}" wx:for-item="v" wx:key="k" wx:for-index="index">
          <!-- wx:for绑定数组 wx:for-item指定数组当前元素的变量名 index指定下标的变量名 -->
            <view class="li {{v.checked?'cur':''}}" data-index="{{index}}" data-value="{{v.value}}" bindtap="checkLabs">
              <label class='ti'>{{v.value}}</label>
              <image class="zi {{v.checked?'cur':''}}" data-index="{{index}}" data-value="{{v.value}}" bindtap="switchtap" src="../imge/duihao.png"></image>
            </view>
          </block>
          <!-- <view class="all_btn" bindtap="all">全选</view> -->
        </view>

js选中累加，改变数据数组中的checked的布尔值

Page({
	data:{
		arr:[],
		items: [
      { value: '星期一', checked:'' },
      { value: '星期二', checked:'' },
      { value: '星期三', checked:'' },
      { value: '星期四', checked: '' },
      { value: '星期五', checked: '' },
      { value: '星期六', checked: '' },
      { value: '星期日', checked: ''},
    ],
	},
	checkLabs(e) {
    var that = this,
      index = e.currentTarget.dataset.index,
      value = e.currentTarget.dataset.value,
      items = that.data.items,
      arr = that.data.arr,
      val = items[index].checked, //点击前的值
      limitNum = 7-this.data.num,
      curNum = 0; //已选择数量

    //选中累加
    for (var i in items) {
      if (items[i].checked) {
        curNum += 1;
      }
      that.setData({
        curr: curNum+1
      })
    }
    if (!val) {
      if (curNum == limitNum) {
        wx.showModal({
          content:'选择数量不能超过'+(limitNum)+'个',
          showCancel: false
        })
        return;
      }
      arr.push(value);
    } else {
      for (var i in arr) {
        if (arr[i] == value) {
          arr.splice(i, 1);
        }
      }
    }
    items[index].checked = !val;
    that.setData({
      items: items,
      arr: arr
    })
  },

})
		

cs根据checked的状态，改变单个框体的样式类`

.the-label{
  margin-left: 65rpx;
  width: 95%;
  height: 120px;
  margin-top: 50px;
}
.the-label .th{
  width: 100%; overflow: hidden;
}
.the-label .th .ti{ 
  font-size: 30rpx; color: white
}
.the-label .th .tt{
  color: white; font-size: 24rpx;
 }
.the-label .list{
  width: 100%;
  overflow:hidden;
  margin-top:-60rpx;
}
.the-label .list .li{
  padding: 0 32rpx;
  height: 70rpx; 
  line-height: 60rpx; 
  border: 1px solid #3f3f3f;  
  border-radius: 10rpx; 
  overflow: hidden; 
  font-size: 26rpx; 
  color: black; 
  float: left; 
  margin: 0 17rpx 17rpx 0; 
  position: relative;
}
.the-label .list .li .zi{
  display: none;
  width: 27px;
  height: 24px;
  position: absolute;
  top: 45px;
  left: 116px;
}
.the-label .list .cur .zi.cur{
  display: block;
  width: 27rpx;
  height: 24rpx;
  position: absolute;
  top: 48rpx;
  left: 116rpx;
}
.the-label .list .li.cur{ 
  color: #3f3f3f; 
  border-color: #df7e05;
  font-weight: bold
}