wxml
<!-- 多选框列表 -->
<checkbox-group class="checkboxList" @change="checkboxChange">
<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in goodsList" :key="index" style="display: flex;align-items: center;padding: 20rpx 0;">
<view>
<!--style="transform: scale(.7);" 可以修改多选框的大小-->
<checkbox :value="item.value" :checked="item.checked" style="transform: scale(.7);" />
...
</view>
</label>
</checkbox-group>
...
<!--全选按钮-->
<checkbox-group @change="changeCheckAll">
<label>
<checkbox value="checked" :checked="checked" style="transform: scale(.7);" />
<text>全选</text>
</label>
</checkbox-group>
js
data(){
goodsList:[],
// 全选按钮的选中状态
checked:false
}
// 多选框点击事件
checkboxChange: function(e) {
var items = this.goodsList,
values = e.detail.value;
let arr = []
for (var i = 0, lenI = items.length; i < lenI; ++i) {
const item = items[i]
if (values.includes(item.value)) {
item.checked = true
arr.push(item)
}
// 设置全选按钮的选中状态
if(arr.length==items.length){
this.checked = true
}else{
this.checked = false
}
}
},
// 切换是否全选
changeCheckAll(e){
let items = this.goodsList;
if(e.detail.value.length==0){
this.goodsList.map(item => this.$set(item,'checked',false))
this.checked = false
}else{
this.goodsList.map(item => this.$set(item,'checked',true))
this.checked = true
}
}
},