复选框单选，全选，非全选（小程序）

                

wxml

<block wx:for="{{list}}" wx:key="{{item.id}}" wx:for-index="idx">
  <view class='cont'>
    <checkbox-group bindchange="checkboxChange" data-checkid = "{{item.id}}">
      <label>
        <checkbox checked="{{item.checkeditem}}"  color='#3B9EF5'/>
      </label>
    </checkbox-group>
    <view class='column'>
      <text>{{item.shopName}} {{item.price}}</text>
      <text>{{item.guige}}</text>
      <text>{{item.desc}}</text>
    </view>
    <view class='count'>
      <text>-</text>
      <text>{{shopNum}}</text>
      <text>+</text>
    </view>
  </view>
</block>
<view class='all'>
  <checkbox-group bindchange="checkedAll">
    <label>
      <checkbox checked="{{checked_all}}"  color='#3B9EF5'/>
    </label>
    全选
  </checkbox-group>
</view>

wxss

page{
  background: #f1f1f1;
}
.cont{
  background: #ffffff;
  margin-top: 20rpx;
  padding: 20rpx;
  display: flex;
  align-items: center;
}
.column{
  display: flex;
  flex-direction: column;
  margin-left: 50rpx;
}
checkbox .wx-checkbox-input{
  border-radius: 50%;
}
.all{
  margin-top: 20rpx;
  background: #ffffff;
}

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [
      {
        id: 15,
        shopName: '小神童',
        guige: '75gx40支',
        desc: '建议零售0.5元/支',
        price:10
      },
      {
        id: 16,
        shopName: '蒙牛',
        guige: '75gx40支',
        desc: '建议零售0.5元/支',
        price:20
      },
      {
        id: 17,
        shopName: '伊利',
        guige: '75gx40支',
        desc: '建议零售0.5元/支',
        price:30
      }
    ],
    countSum:0,
    checked_all:false,
    shopNum:0,
    trolleyArr:[]  //购物车商品id
  },
  //单选
  checkboxChange: function (e) {
    // console.log(e)
    var that = this
    var value = e.detail.value;
    var valLen = value.length
    var checkid = e.target.dataset.checkid
    var list = that.data.list
    var listLen = list.length
    var num = 0
    if(valLen != 0){      //选中
      for(var i=0;i<listLen;i++){
        if (list[i].id == checkid) {//console.log(list[i].id + 'if' +checkid)
          if (!list[i].checkeditem){
            list[i].checkeditem = true;
            num = num + 1;           //console.log('--' + num)
            that.data.trolleyArr.push(list[i].id);
          }
        }else{
          if (list[i].checkeditem) {//console.log(list[i].id + 'else' + checkid)
            num = num + 1;           //console.log('++' + num)
          }
        }
      }
      // console.log(that.data.trolleyArr)
      if(num == listLen){
        that.setData({
          checked_all:true  //全选
        })
      }
    }else{
      var arr = []
      var trolleyLen = that.data.trolleyArr.length
      for(var i=0;i<listLen;i++){
        if(list[i].id == checkid){
          if(list[i].checkeditem){
            list[i].checkeditem = false

            for(var j=0;j<trolleyLen;j++){
              if(that.data.trolleyArr[j] == checkid){
                continue;
              }else{
                arr.push(that.data.trolleyArr[j])
              }
            }
          }
        }
      }
      that.setData({
        trolleyArr:arr,
        checked_all:false
      })
    }
      that.setData({
        list:list
      })
    // console.log(that.data.trolleyArr)
  },
  // 全选
  checkedAll:function(e){
    var that = this
    var value = e.detail.value;
    var valLen = value.length
    var list = that.data.list
    var listLen = list.length
    // console.log(valLen)
    if (valLen != 0){
      for(var i=0;i<listLen;i++){
        list[i].checkeditem = true;
        that.data.trolleyArr.push(list[i].id)
      }
      that.setData({
        checked_all:true,//全选
        list:list
      })
    }else{
      for(var i=0;i<listLen;i++){
        list[i].checkeditem = false
      }
      that.setData({
        trolleyArr:[],
        checked_all:false,
        list:list
      })
    } 
  }
}