关于微信小程序的多选和全选实现

效果

简述

今天实现了一个小程序版的仿后端管理界面的多选和全选checkbox，大致思路如下

实现

wxml

<!-- 一键全选 -->
<checkbox-group bindchange="selectAll">
  <checkbox value="all" checked="{{checkedAll}}"></checkbox> 一件全选
</checkbox-group> 
<!-- 数据列表 -->
<view wx:for="{{dataList}}" wx:key="i">
  <view style="width:100%;height:60rpx;border:1px solid black;">
    <checkbox-group bindchange="checkboxChange" data-id="{{item.id}}">
      <checkbox value="{{item.id}}" style="float:left;" checked='{{item.checked}}'></checkbox>
    </checkbox-group> 
    <text style="float:left">{{item.id}}</text>
  </view>
</view>

js

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    dataList:[
      {
        id:"17813566345",
        checked:false
      },
      {
        id:"27813566345",
        checked:false
      },
      {
        id:"37813566345",
        checked:false
      },
      {
        id:"47813566345",
        checked:false
      },
      {
        id:"57813566345",
        checked:false
      },
    ], // 数据列表
    checkedIds:[], // 选中的id列表,
    checkedAll:false
  },
  checkboxChange(e) { // 复选框change事件
    let id = e.detail.value[0];
    let checkedIds = this.data.checkedIds;
    if (id !==undefined && id !=='') { // 判断是否选中
      checkedIds.push(id);
    }else { // 过滤出选中的复选框
      checkedIds = checkedIds.filter(item=>String(item)!==String(e.currentTarget.dataset.id));
    }
    if (checkedIds.length == this.data.dataList.length) { // 调整全选按钮状态
      this.setData({
        checkedIds:checkedIds,
        checkedAll:true
      })
    }else {
      this.setData({
        checkedIds:checkedIds,
        checkedAll:false
      })
    }
    console.log(this.data.checkedIds);
  },
  selectAll(e){ // 全选框
    if (e.detail.value[0] ==="all") {
      console.log("全部选中");
      this.setData({
        checkedIds:this.data.dataList.map(item=>item.id),
        dataList:this.data.dataList.map(item=>{item.checked = true;return item;})
      })
    }else { // 直接清空列表
      console.log("清空");
      this.setData({
        checkedIds:[],
        dataList:this.data.dataList.map(item=>{item.checked = false;return item;})
      });
    }
    console.log(this.data.checkedIds);
  }

})