uni-app 实现全选全不选且有级联效果的 checkbox

在uni-app中实现具有全选/全不选及级联效果的checkbox，可以通过数据绑定和事件处理来实现。以下是一个简单的代码示例，展示了如何实现这一功能。

首先，在页面的data中定义数据结构：

data() {
    return {
        // 全选checkbox的状态
        isAllChecked: false,
        // checkbox组数据
        checkboxItems: [
            {
                id: 1,
                label: 'Group 1',
                children: [
                    { id: 11, label: 'Item 1-1', checked: false },
                    { id: 12, label: 'Item 1-2', checked: false }
                ]
            },
            {
                id: 2,
                label: 'Group 2',
                children: [
                    { id: 21, label: 'Item 2-1', checked: false },
                    { id: 22, label: 'Item 2-2', checked: false }
                ]
            }
        ]
    };
}

然后，在模板中渲染checkbox：

<template>
    <view>
        <!-- 全选checkbox -->
        <checkbox :checked="isAllChecked" @change="handleAllCheckChange">{{ isAllChecked ? '全选' : '全不选' }}</checkbox>
        
        <!-- 分组checkbox -->
        <view v-for="group in checkboxItems" :key="group.id">
            <view>{{ group.label }}</view>
            <checkbox-group @change="handleGroupCheckChange(group.id)">
                <view v-for="item in group.children" :key="item.id">
                    <checkbox :checked="item.checked">{{ item.label }}</checkbox>
                </view>
            </checkbox-group>
        </view>
    </view>
</template>

接下来，在方法中处理checkbox的变化：

methods: {
    // 全选/全不选处理
    handleAllCheckChange(e) {
        const isChecked = e.detail.value.length > 0;
        this.checkboxItems.forEach(group => {
            group.children.forEach(item => {
                item.checked = isChecked;
            });
        });
        this.isAllChecked = isChecked;
    },
    // 分组checkbox处理
    handleGroupCheckChange(groupId) {
        const group = this.checkboxItems.find(g => g.id === groupId);
        const allChecked = group.children.every(item => item.checked);
        const noneChecked = group.children.every(item => !item.checked);
        this.isAllChecked = this.checkboxItems.every(g => g.children.every(item => item.checked));
        
        // 如果当前组全部选中，且其他组也全部选中，则全选checkbox为选中状态
        // 如果当前组全部未选中，且不存在部分选中的组，则全选checkbox为未选中状态
        // 其他情况，全选checkbox为半选状态（这里简单处理为不改变其状态）
    }
}

注意：上面的handleGroupCheckChange方法仅用于更新isAllChecked状态，实际项目中可能需要进一步处理半选状态或其他复杂逻辑。上述代码未包含半选状态的UI处理，因为半选状态的UI实现通常依赖于具体的UI框架和样式需求。