我的需求是多选,不管年级如何切换,只要是选择过的班级,最终拿到所有id
<view class="sold_cents">
<view class="grade_data flex">
<view class="flex bot_grade">
<view>年级</view>
<view>班级</view>
</view>
<view class="flex grade_cent">
<view class="grade_cent_left">
<view wx:for="{{items}}" wx:key="index" data-index="{{index}}"
class="fanwei_check fanwei_left flex {{checkbox_index==index?'checked_class':''}}" data-id="{{item.id}}"
bindtap="click_checkbox">
<label>
<view class="fanwei_check_left">
{{item.title}}
</view>
</label>
<view class="fanwei_check_right">
<image mode="widthFix" src="/image/img76.png"></image>
</view>
</view>
</view>
<view>
<view class="fanwei_check flex" wx:for="{{items_child}}" wx:key="index">
<view class="fanwei_check_left flex" data-id="{{item.id}}" bindtap="checkboxChange">
<image mode="widthFix" src="/image/img71.png" hidden="{{item.checked}}"></image>
<image mode="widthFix" src="/image/img72.png" hidden="{{!item.checked}}"></image>
<view>{{item.title}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
page{
background: cornflowerblue;
}
.flex{
display: flex;
}
.sold_cents {
width: 100%;
height: 750rpx;
background: #FFFFFF;
border-radius: 40rpx 40rpx 0px 0px;
position: fixed;
left: 0;
bottom: 0;
z-index: 5;
}
.bot_grade {
border-bottom: 1px solid #F2F2F2;
padding: 18rpx 0 22rpx 0;
}
.bot_grade>view {
width: 50%;
text-align: center;
font-size: 32rpx;
font-weight: 500;
color: #333333;
}
.grade_cent>view{
width: 50%;
}
.grade_cent_left{
background-color: #F9F9F9;
}
.grade_data{
width: 100%;height: 100%;flex-direction: column;
}
.grade_cent{
flex: 1;
}
.fanwei_check{
padding: 30rpx;
}
.fanwei_check_right image{
width: 15rpx;
margin-left: 30rpx;
}
.hidden_checkbox{
display: none;
}
.fanwei_left{
justify-content: center;
align-items: center;
}
.checked_class{
background-color: #FFFFFF;
}
.fanwei_check_left image{
width: 40rpx;margin-right: 20rpx;
}
Page({
data: {
checkbox_index: 0,
items: [{
child: [
{
checked: false,
id: 1,
title: "1班级",
type: 3
},
{
checked: false,
id: 2,
title: "1班级",
type: 3
}
],
id: 3,
title: "2021级",
type: 2
}, {
child: [
{
checked: false,
id: 4,
title: "3班级",
type: 3
},
{
checked: false,
id: 5,
title: "4班级",
type: 3
}
],
id: 6,
title: "2022级",
type: 2
}, {
child: [
{
checked: false,
id: 7,
title: "5班级",
type: 3
},
{
checked: false,
id: 8,
title: "FF班级",
type: 3
}
],
id: 9,
title: "2023级",
type: 2
}],//所有范围数据
items_child: [],//当前展示的班级数据 默认显示第一个年级的班级数据
all_child: [] //最终提交的所有班级id
},
click_checkbox(e) {
// 年级
let that = this;
let index = e.currentTarget.dataset.index;
that.setData({
checkbox_index: index,
items_child: that.data.items[index].child //显示当前年级的班级数据
});
},
checkboxChange(e) {
let that = this;
let all_child_val = that.data.all_child;
let id = e.currentTarget.dataset.id;
if (all_child_val.includes(id)) {
// 包含这个id 删除这个id 取消
all_child_val.splice(all_child_val.findIndex(item => item === id), 1)
} else {
// 不包含id 添加这个id 新增
all_child_val.push(id);
}
that.setData({
all_child: all_child_val
});
console.log("当前选中的值", that.data.all_child)
// 拿最终选中的值去找当前展示的数组,更改checked的状态
let items_child_val = that.data.items_child;
for (let k = 0; k < that.data.items_child.length; k++) {
let id_val = that.data.items_child[k].id;
if (all_child_val.includes(id_val)) {
var checked_type = "items_child[" + k + "].checked";
console.log("000", checked_type)
that.setData({
[checked_type]: true
});
} else {
var checked_type = "items_child[" + k + "].checked";
console.log("000", checked_type)
that.setData({
[checked_type]: false
});
}
}
}
})