可能会存在一些bug
以下是对每部分的一些解释
<template>部分：
- 通过
<u-checkbox-group>标签来创建一个复选框组，该组中的所有复选框将共享一个数据模型。v-model指令用于绑定复选框组的值，即选中的复选框的名称。placement属性设置为"column"，表示复选框列表将按列排列。@change事件监听器绑定到checkboxChange方法，当复选框状态发生变化时会触发这个方法。- 在复选框组内部，使用
v-for循环遍历checkboxList1数组中的每个对象，并创建相应的<u-checkbox>复选框。<u-checkbox>元素的属性设置了复选框的外观和标签，并将复选框的状态与数据模型中的选中状态关联。
<script>部分：
- 在
data中定义了两个数据属性：checkboxValue1和checkboxList1。checkboxValue1用于存储选中的复选框的名称，初始为空数组。checkboxList1包含了一个对象数组，每个对象代表一个复选框选项，包括名称和是否禁用的信息。- 在
methods中定义了两个方法：
checkboxChange方法用于处理复选框状态变化的事件。在这个示例中，它只是简单地打印出变化的信息。selectAll方法用于全选功能。根据当前选中的复选框数量和总复选框数量，它更新checkboxValue1数组以实现全选或取消全选的功能。同时，它也在控制台输出了选中状态的信息。
废话不多说直接上代码
<template> <view> <u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange" > <u-checkbox shape="circle" size='60rpx' labelSize='50rpx' :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList1" :key="index" :label="item.name" :name="item.name" > </u-checkbox> </u-checkbox-group> <!-- 添加全选按钮 --> <u-checkbox shape="circle" size='60rpx' labelSize='50rpx' :label="'全选'" @change="selectAll" > </u-checkbox> </view> </template> <script> export default { data() { return { checkboxValue1:[], // 基本案列数据 checkboxList1: [{ name: '苹果', disabled: false }, { name: '香蕉', disabled: false }, { name: '橙子', disabled: false } ], } }, methods: { checkboxChange(n) { console.log('change', n); }, selectAll() { // 点击全选按钮时，更新所有复选框的选中状态 if (this.checkboxValue1.length === this.checkboxList1.length) { this.checkboxValue1 = []; console.log(this.checkboxValue1,1); console.log(this.checkboxList1,1); } else { this.checkboxValue1 = this.checkboxList1.map(item => item.name); console.log(this.checkboxValue1,1); console.log(this.checkboxList1,2); } } } } </script>
