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

最新推荐文章于 2024-08-20 11:41:51 发布

原创最新推荐文章于 2024-08-20 11:41:51 发布 · 7.4k 阅读

48 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#小程序 #微信小程序 #微信小程序多选 #多选与全选

web前端同时被 2 个专栏收录

23 篇文章

订阅专栏

微信小程序

4 篇文章

订阅专栏

本文介绍了一个小程序中的多选框及全选功能实现方法。通过wxml和js代码展示了如何使用checkbox组件并监听其change事件来更新选中状态，同时保持全选按钮与列表项的一致性。

效果

请添加图片描述

简述

今天实现了一个小程序版的仿后端管理界面的多选和全选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);
  }

})