此方法使用 ColorUI 作爲基礎樣式,所以複選框切換要改變相應的類才能正確展示。
<template>
<view>
<!-- 單個複選框 -->
<checkbox-group class="block" @change="checkboxChange">
<view class="cu-form-group">
<view class="title">複選選操作(checkbox)</view>
<checkbox :class="isChecked?'checked':''" :checked="isChecked?true:false" value="1"></checkbox>
</view>
</checkbox-group>
<!-- 多個複選框,帶全選 -->
<view>
<checkbox-group class="block" @change="changeCheckbox">
<view v-for="item in checkboxData" :key="item.value">
<checkbox :value="String(item.value)" :checked="checkedArr.includes(String(item.value))" :class="{'checked':checkedArr.includes(String(item.value))}"></checkbox>
<text>{{item.label}}</text>
</view>
</checkbox-group>
</view>
<view>
<checkbox-group @change="allChoose">
<label>
<checkbox value="all" :class="{'checked':allChecked}" :checked="allChecked?true:false"></checkbox> 全選
</label>
</checkbox-group>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isChecked:false,
checkboxData:[
{'value':0,'label':'選項一'},
{'value':1,'label':'選項二'},
{'value':2,'label':'選項三'},
{'value':3,'label':'選項四'},
{'value':4,'label':'選項五'},
{'value':5,'label':'選項六'},
{'value':6,'label':'選項七'},
{'value':7,'label':'選項八'},
{'value':8,'label':'選項九'},
{'value':9,'label':'選項十'}
],
checkedArr:[], //複選框選中的值
allChecked:false //是否全選
}
},
methods: {
// 單個複選框事件
checkboxChange(e) {
let values = e.detail.value;
if(values[0]==1){
this.isChecked=true;
}else{
this.isChecked=false;
}
},
// 多選複選框改變事件
changeCheckbox(e){
this.checkedArr = e.detail.value;
// 如果選擇的數組中有值,並且長度等於列表的長度,就是全選
if(this.checkedArr.length>0 && this.checkedArr.length==this.checkboxData.length){
this.allChecked=true;
}else{
this.allChecked=false;
}
},
// 全選事件
allChoose(e){
let chooseItem = e.detail.value;
// 全選
if(chooseItem[0]=='all'){
this.allChecked=true;
for(let item of this.checkboxData){
let itemVal=String(item.value);
if(!this.checkedArr.includes(itemVal)){
this.checkedArr.push(itemVal);
}
}
}else{
// 取消全選
this.allChecked=false;
this.checkedArr=[];
}
}
}
}
</script>
<style>
</style>