复选框checkbox之全选、多选、反选

1，wxml

<view style="margin:100rpx 30rpx">
  <checkbox-group bindchange="checkboxAllChange">
    <label class="row align">
      <checkbox checked="{{checked}}"/>
      <view>全选</view>
    </label>
  </checkbox-group>
  <checkbox-group bindchange="checkboxChange">
    <label class="" wx:for="{{list}}" wx:key="index" class="row align" style='margin:20rpx 0'>
      <checkbox value="{{item.name}}" checked="{{item.checked}}"/>
      <view style="margin-right:40rpx">{{item.name}}</view>
      <view>{{'￥'+item.price}}</view>
    </label>
  </checkbox-group>
  <view>{{'共计￥'+sumPrice}}</view>
</view>

2，js

Page({
  data: {
    list:[
      {name:'苹果',price:10},
      {name:'哈密瓜',price:40},
      {name:'莲雾',price:50},
    ],
    sumPrice:0,
    checked:false
  },
  checkboxAllChange:function(){
    this.setData({
      checked:!this.data.checked,
    })
    var list = this.data.list
    var sumPrice = 0
    if(this.data.checked){
      list.every(v=>{
        return v.checked = true,sumPrice += v.price
      })
    }else{
      list.forEach(v=>{
       v.checked = false
       sumPrice = 0
      })
    }
    this.setData({
      list,
      sumPrice
    })
  },
  checkboxChange:function(e){
    var checked = this.data.checked
    const list = this.data.list
    const val = e.detail.value
    var sumPrice = 0,num = 0
    for (let i = 0; i < list.length;i++) {
      list[i].checked = false
      for (let j = 0;j < val.length;j++) {
        if (list[i].name == val[j]) {
          list[i].checked = true
          sumPrice += list[i].price
          num ++
          break
        }
      }
    }
    if(num == list.length){
      checked = true
    }else{
      checked = false
    }
    this.setData({
      list,
      sumPrice,
      checked
    })
    
  },
  
})