uni组件checkbox组件区分全选和半选

### uni-app 中 checkbox 组件实现全选与半选的功能区别 在 `uni-app` 的开发环境中，通过内置的 `checkbox` 和 `checkbox-group` 组件可以轻松实现全选和半选功能。以下是具体实现方式及其功能区别的说明： #### 1. **全选状态** 当所有的子项都被勾选时，则认为当前处于“全选”状态。可以通过监听 `checkbox-group` 的 `@change` 事件来动态判断所有子项是否全部被选中。 代码示例： ```html <template> <view> <!-- 全选按钮 --> <label> <checkbox :checked="isAllChecked" @click="toggleAllCheck" /> <text>全选</text> </label> <!-- 子项列表 --> <checkbox-group @change="handleCheckboxChange"> <label v-for="(item, index) in items" :key="index"> <checkbox :value="item.value" :checked="item.checked" /> <text>{{ item.label }}</text> </label> </checkbox-group> </view> </template> <script> export default { data() { return { items: [ { value: 'option1', label: '选项一', checked: false }, { value: 'option2', label: '选项二', checked: false }, { value: 'option3', label: '选项三', checked: false } ] }; }, computed: { isAllChecked() { return this.items.every(item => item.checked); // 判断是否所有子项都已选中 } }, methods: { toggleAllCheck() { const isChecked = !this.isAllChecked; this.items.forEach(item => (item.checked = isChecked)); // 更新所有子项的状态 }, handleCheckboxChange(e) { const values = e.detail.value; // 获取当前选中的值数组 this.items.forEach(item => { item.checked = values.includes(item.value); // 同步更新数据源 }); } } }; </script> ``` 在此代码中，`isAllChecked` 是一个计算属性，用于实时检测所有子项是否已被选中[^1]。如果所有子项均被选中，则触发“全选”逻辑；反之则取消全选。 --- #### 2. **半选状态** 半选状态是指部分子项被选中而未达到完全选中的情况。为了支持这种状态，在实际项目中通常会引入额外的状态变量（如 `indeterminate`），并通过自定义样式或第三方库（如 uView）来展示该状态。 代码示例（基于 uView 库实现）： ```html <template> <view> <!-- 半选/全选按钮 --> <u-checkbox shape="circle" indeterminate="{{isIndeterminate}}" :checked="isAllChecked" @change="onSelectAll" > 全选 </u-checkbox> <!-- 子项列表 --> <checkbox-group @change="handleCheckboxChange"> <label v-for="(item, index) in items" :key="index"> <checkbox :value="item.value" :checked="item.checked" /> <text>{{ item.label }}</text> </label> </checkbox-group> </view> </template> <script> export default { data() { return { items: [ { value: 'option1', label: '选项一', checked: true }, { value: 'option2', label: '选项二', checked: false }, { value: 'option3', label: '选项三', checked: true } ], isIndeterminate: false, isAllChecked: false }; }, watch: { items: { handler(newVal) { const allChecked = newVal.every(item => item.checked); const someChecked = newVal.some(item => item.checked); this.isAllChecked = allChecked; this.isIndeterminate = !allChecked && someChecked; // 部分选中时设置为半选状态 }, deep: true } }, methods: { onSelectAll(e) { const isChecked = e.detail.value.length > 0; this.items.forEach(item => (item.checked = isChecked)); this.isIndeterminate = false; // 手动操作时不显示半选状态 }, handleCheckboxChange(e) { const values = e.detail.value; this.items.forEach(item => { item.checked = values.includes(item.value); }); } } }; </script> ``` 此代码片段展示了如何利用 `watch` 方法监控子项的变化，并根据条件自动调整父级复选框的状态。其中，`isIndeterminate` 属性表示半选状态，仅适用于某些 UI 框架的支持场景[^3]。 --- #### 3. **功能对比总结** | 特性 | 全选状态 | 半选状态 | |-------------------|--------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------| | 定义 | 当前组内的所有子项均已选中 | 当前组内仅有部分子项被选中 | | 数据同步 | 使用 `every()` 或者手动遍历检查所有子项是否均为 `true` | 结合 `some()` 和 `every()` 来判断是否存在既非全选又非无选的情况 | | 用户交互行为 | 点击全选按钮可一键切换所有子项的状态 | 不提供单独的操作入口，需依赖程序逻辑推导 | | 显示效果 | 复选框呈现正常勾选态 | 若框架支持，则可通过特殊图标（如虚线勾）或者颜色变化体现 | --- ###