<view>
<u-checkbox-group v-model="checkboxValue1" placement="column" >
<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in
checkboxList1" :key="index"
:label="item.name" :name="item.name" :disabled='item.disabled'
:checked="item.checked" @change="choose(item)">
</u-checkbox>
</u-checkbox-group>
</view>
<view class="">
<u-checkbox-group>
<u-checkbox label='全选' :checked="isAllChecked" @change="allChoose">
</u-checkbox>
</u-checkbox-group>
</view>
data() {
return {
checkboxList1: [{
name: '苹果',
disabled: false,
checked: false
},
{
name: '香蕉',
disabled: false,
checked: false
},
{
name: '橙子',
disabled: false,
checked: false
}
],
isAllChecked: false
}
methods: {
// 反选
choose(item) {
//先进行取反,改变当前数据的checked状态
item.checked = !item.checked;
// 是否全部选中
let allSelected = this.checkboxList1.every(item => item.checked === true);
if (allSelected)
this.isAllChecked = true;
else
this.isAllChecked = false;
},
// 全选
allChoose() {
this.isAllChecked = !this.isAllChecked;
this.checkboxList1.map(item => item.checked = this.isAllChecked);
},
}