小程序结合vant weapp的复选框（checkbox）组件实现全选、反选、多选

男娘i 2024-04-17 18:08 7阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70 2][]

我是结合的[vant weapp的checkbox][vant weapp_checkbox]实现的,less代码我就不给了

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">导出全部</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:"卫生间仿古砖瓷砖800*800 x 80块",
            materail_brand:"鹰牌",
            status:"无货",
            isChecked:false
          },
          {
            id:1002,
            materail_name:"卫生间仿古砖瓷砖800*800 x 80块",
            materail_brand:"鹰牌",
            status:"有货",
            isChecked:false
          },
          {
            id:1003,
            materail_name:"卫生间仿古砖瓷砖800*800 x 80块",
            materail_brand:"鹰牌",
            status:"无货",
            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){
        /* 全选功能 */
          this.checked = this.materailList.map(item=>{
            return item.id.toString()
          })
          this.checkedAll=event.$wx.detail;
          if(this.checkedAll === false)
            this.checked = []
         }
      },
      onLoad() {
    
      }
    })

主要的实现思路是，当你点击全选按钮时，遍历你的数据，在这儿也就是materailList，把每一项的id都放进this.checked数组中，这样就实现全选了。

这儿还实现了反选以及当其中有一个未选中时即全选状态不选中的效果。

希望能帮助到你们，有疑问的欢迎下方评论。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190829173213462.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190829173445904.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/d8749715984d4f6ebbe06b0f8f16304b.png
[vant weapp_checkbox]: https://youzan.github.io/vant-weapp/#/checkbox