uniapp的checkbox全选单选

### 如何在 UniApp 中实现 Checkbox 的全选与单选功能 在 UniApp 开发中，可以通过绑定数据模型并监听事件的方式实现 CheckBox 的全选和单选功能。以下是详细的实现方法： #### 数据结构设计 为了管理多个选项的状态，通常会定义一个数组来存储每个选项的信息及其选中状态。 ```javascript data() { return { items: [ { id: 1, name: '选项一', checked: false }, { id: 2, name: '选项二', checked: false }, { id: 3, name: '选项三', checked: false } ], isAllChecked: false // 控制全选按钮的状态 }; } ``` #### 页面布局 通过 `label` 和 `checkbox` 组件构建界面，并动态绑定每一项的选中状态。 ```html <view> <!-- 全选 --> <label class="uni-list-cell uni-list-cell-pd"> <checkbox :checked="isAllChecked" @click="toggleAllCheck" /> 全选 </label> <!-- 列表项 --> <block v-for="(item, index) in items" :key="index"> <label class="uni-list-cell uni-list-cell-pd"> <checkbox :checked="item.checked" @click="toggleSingleCheck(index)" /> {{ item.name }} </label> </block> </view> ``` #### 方法逻辑 当用户点击某个单项时，更新该项的选中状态；如果所有项都被选中，则自动触发全选按钮变为已选中状态。反之亦然。 ```javascript methods: { toggleSingleCheck(index) { this.items[index].checked = !this.items[index].checked; // 更新全选按钮状态 const allChecked = this.items.every(item => item.checked); this.isAllChecked = allChecked; console.log('当前选中:', JSON.stringify(this.items)); }, toggleAllCheck() { const isChecked = !this.isAllChecked; // 反转全选状态 this.items.forEach(item => (item.checked = isChecked)); // 同步到每一个子项 this.isAllChecked = isChecked; console.log('全选状态改变:', isChecked ? '全部选中' : '未全选'); } } ``` 以上代码实现了基本的功能需求[^1]。其中，`items` 数组用于保存每一条记录的数据及对应的选中状态，而 `isAllChecked` 是用来控制全选按钮是否被激活的关键变量。 #### 进一步优化 对于更复杂的场景（如分页加载），需要额外考虑跨页之间的状态同步问题。此时可引入 Vuex 或其他全局状态管理工具统一维护选中状态[^2]。 --- ### 示例总结 此方案利用 Vue 的双向绑定特性简化了 DOM 操作流程，使得开发者能够专注于业务逻辑处理而非繁琐的手动更新过程。同时借助计算属性或辅助函数进一步增强了代码的可读性和扩展性。