uniapp 復選框全選（基於colorui組件）

說明：本案例的樣式基於colorui組件庫 感興趣的小伙伴可以看下教程 colorui組件庫開發文檔或者csdn的文檔，順便再分享下 colorui的群資源

• html

<checkbox-group class="block" @change="CheckboxChange">
    <checkbox :value="String(item.value)" :checked="checkedArr.includes(String(item.value))" :class="{'checked':checkedArr.includes(String(item.value))}" class="blue"></checkbox>
</checkbox-group>

<!-- 全選按鈕 -->
<checkbox-group @change="selectAll">
  <label>
    <checkbox style="transform: scale(0.9);" value="all" :class="{'checked':allChecked}" :checked="allChecked?true:false" class="blue"></checkbox>
    <text class="margin-left-xs text-lg">全選</text>
   <!-- <text class="margin-left-xs text-lg">已選中{{num}}個人</text></label> -->
</checkbox-group>

• js

// 復選框循環的數組
checkbox: [{
    value: 'A',//綁定的value值
    checked: false,//默認選中狀態：未選中
},
{
    value: 'B',
    checked: false,
},
{
    value: 'C',
    checked: false,
},
{
    value: 'd',
    checked: false,
},
{
    value: 'e',
    checked: false,
},
{
    value: 'f',
    checked: false,
},
{
    value: 'g',
    checked: false,
},
{
    value: 'h',
    checked: false,
}],
checkedArr: [],//存放選中的值
//復選框選中的值
allChecked: false,//全選操作時用的參數，用於判斷是否全選或者全不選

• methods

CheckboxChange(e) {
    this.checkedArr = e.detail.value;
    console.log("--單個選中--", this.checkedArr) this.num = this.checkedArr.length
    // 如果選擇的數組中有值，並且長度等於列表的長度，就是全選
    if (this.checkedArr.length > 0 && this.checkedArr.length == this.checkbox.length) {
        this.allChecked = true;
    } else {//否則就是全不選
        this.allChecked = false;
    }
},
selectAll(e) {
    // console.log(e)
    let chooseItem = e.detail.value;
    // 全選
    if (chooseItem[0] == 'all') {
        this.allChecked = true;
        for (let item of this.checkbox) {
            let itemVal = String(item.value);
            if (!this.checkedArr.includes(itemVal)) {
                this.checkedArr.push(itemVal);
            }
        }
        this.num = this.checkedArr.length console.log(this.checkedArr)
    } else {
        // 取消全選
        this.allChecked = false;
        this.checkedArr = [];
        this.num = 0
    }
},

• 效果圖