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

效果

简述

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