I am united. checkbox of vant weapp Implemented, less code I won't give

index.wpy

<view class="item">
              <van-checkbox-group value="{{ checked }}" bind:change="onChange">
                <van-row custom-class="padding-list" v-for="list,index in materailList">
                  <van-col span="2">
                    <van-checkbox name="{{ list.id }}"></van-checkbox>
                  </van-col>
                  <van-col span="14">{{list.materail_name}}</van-col>
                  <van-col span="4">{{list.materail_brand}}</van-col>
                  <van-col span="4">{{list.status}}</van-col>
                </van-row>
              </van-checkbox-group>
              <van-row custom-class="padding-list">
                <van-col span="24">
                  <van-checkbox value="{{ checkedAll }}" bind:change="allChecked">Export all</van-checkbox>
                </van-col>
              </van-row>
</view>

 

index.js

import wepy from '@wepy/core';

wepy.page({
  data: {
    active: 0,
    checked:[],
    checkedAll:false,
    materailList:[
      {
        id:1001,
        materail_name:"Bathroom antique tile 800*800 x 80 block",
        materail_brand:"Eagle Brand",
        status:"No goods",
        isChecked:false
      },
      {
        id:1002,
        materail_name:"Bathroom antique tile 800*800 x 80 block",
        materail_brand:"Eagle Brand",
        status:"In stock",
        isChecked:false
      },
      {
        id:1003,
        materail_name:"Bathroom antique tile 800*800 x 80 block",
        materail_brand:"Eagle Brand",
        status:"No goods",
        isChecked:false
      }
    ]
  },
  methods: {
    onChange(event) {
      this.checked = event.$wx.detail;
      if(this.checked.length == this.materailList.length)
        this.checkedAll=true;
      else
        this.checkedAll=false;
    },
    changeTabbar(event){
      this.active = event.$wx.detail;
    },
    allChecked(event){
    /* Full selection function */
      this.checked = this.materailList.map(item=>{
        return item.id.toString()
      })
      this.checkedAll=event.$wx.detail;
      if(this.checkedAll === false)
        this.checked = []
     }
  },
  onLoad() {

  }
})

The main idea is that when you click on the full selection button, you traverse your data, which is materailList here, and put the id of each item into this.checked array, so that the full selection can be achieved.

It also achieves the effect of reverse selection and when one of them is unchecked, the whole state is unchecked.

Hope to help you, if you have any questions, please comment below.