uni-app 内置组件：CheckboxGroup

有问题请咨询gpt2023-11-12 8:10

CheckboxGroup 组件是 uni-app 中用于创建一组复选框的容器，可以包含多个 Checkbox 项，并且可以实现多选。

API

CheckboxGroup 组件可以与多个 Checkbox 组件一起使用，来创建复选框组。每个 Checkbox 都有自己的 value 属性，这个值在选中时会被 CheckboxGroup 获取并作为其 value 的一部分。

属性

CheckboxGroup 组件的主要属性：

name：复选框组名称，在表单提交时使用。
bindchange：当 CheckboxGroup 中的选项变化时，触发 change 事件，event.detail = {value: ['选中的checkbox的value的数组']}。

事件

bindchange

CheckboxGroup 中的选项变化时触发的事件，返回一个数组，包含了所有选中的 Checkbox 的值。

示例

HTML 部分：

html 复制代码

<checkbox-group name="checkboxGroup" bindchange="checkboxChange">
  <checkbox value="value1">选项1</checkbox>
  <checkbox value="value2">选项2</checkbox>
  <checkbox value="value3">选项3</checkbox>
</checkbox-group>

JavaScript 部分：

javascript 复制代码

export default {
  methods: {
    checkboxChange(e) {
      console.log('checkbox发生change事件，携带value值为：', e.detail.value);
    }
  }
}

在此示例中，当 CheckboxGroup 中的任何一个 Checkbox 被选中或取消选中时，checkboxChange 方法都会被调用，并输出被选中的 Checkbox 的值。

在使用 CheckboxGroup 时，通常需要处理用户的选择结果。你可以在 checkboxChange 事件处理函数中获取到用户的选择数组，然后根据业务需要进行相应的处理。

以上是 CheckboxGroup 组件的基本介绍和使用示例，具体的属性和事件可能会根据 uni-app 的版本更新有所变动，请参考最新的uni-app 官方文档。