如果data中的数据是以下格式 假设我们需要单选全选的是orderItem层的数据 就需要给本层设置唯一标识符id以及默认选中状态selected为false 再设置一个全选按钮allChecked的选中状态
resultList: [
{
fenjieItems: [
],
orderItem: {
id: 1, selected: false,
}
},
{
fenjieItems: [
],
orderItem: {
id: 2, selected: false,
}
},
],
allChecked:false,
在页面中我们就需要这样渲染 注意！ 因为我们需要渲染的是orderItem层 就需要把单选框和orderItem层放在同一级别下
<view class="wuliao" a:for="{{resultList}}" a:key="index" data-index="{{index}}">
<view class="wuliaofont" onTap="handleTap" data-item="{{item}}" data-index="{{index}}">
<view class="wuliaofonto">品号：{{item.orderItem['品牌']}}</view>
<view class="wuliaofonto">型号：{{item.orderItem['规格型号']}}</view>
<view class="fenjie-items" a:for="{{item.fenjieItems}}" data-item="{{item}}" a:key="index" data-index="{{index}}">
<view class="dongbafenjie">
<view class="wuliaofenjie">材料编码：{{item['生产对象']}}</view>
<view class="wuliaofenjie">应配数量：{{item['拣货数量']}}</view>
</view>
</view>
</view>
<checkbox-group onChange="onOneChange" data-index="{{index}}" style="margin-top:20rpx">
<!-- 这里需要注意，checkbox 的 value 应该传入对应的 id 或者唯一标识符 并也定要逐层找到我们需要的item.orderItem.selected层里面的selected-->
<checkbox value="{{item.id}}" checked="{{item.orderItem.selected}}" style="border-radius:50rpx;" />
</checkbox-group>
</view>
// 以下是全选按钮
<checkbox-group onChange="onToggleAll">
<checkbox value="{{0}}" checked="{{allChecked}}" style="border-radius:50rpx;" />
</checkbox-group>
以下为js
// 单选事件
onOneChange: function(e) {
const index = e.currentTarget.dataset.index;
const resultList = this.data.resultList;
resultList[index].orderItem.selected = !resultList[index].orderItem.selected; //只针对当前点击的索引的item取反
this.setData({
resultList: resultList
});
console.log("打印单选的选中状态数据",resultList);
},
// 全选事件
onToggleAll: function(e) {
const checked = !this.data.allChecked; // 取反当前的全选状态
const resultList = this.data.resultList;
resultList.forEach(item => { //遍历所有的item取反
item.orderItem.selected = checked;
});
this.setData({
resultList: resultList,
allChecked: checked
});
console.log("打印全选的选中状态数据",resultList);
},
注意！此文章为钉钉小程序 如果写微信小程序 只需把把事件换成微信小程序的即可