uniapp checkbox-group使用方法

 checkbox-group是一个用于管理一组复选框的组件。它允许用户同时选择多个选项，并可以通过事件监听来获取用户的选择结果

1. 引入组件: 在uni-app中，不需要单独引入组件，可以直接在模板中使用checkbox-group和checkbox标签。

2. 使用checkbox-group: 在模板中添加checkbox-group标签，并通过事件监听器来处理用户的选择行为。

3. 使用checkbox: 在checkbox-group内部添加多个checkbox标签，并设置它们的value属性。

4. 监听change事件: 通过绑定@change事件来监听用户的选择变化，并更新应用的状态。

<template>
  <view class="container">
    <!-- 城市选择的复选框组 -->
    <checkbox-group @change="handleCheckboxChange">
      <block v-for="(item, index) in cities" :key="index">
        <label class="checkbox-label">
          <view class="checkbox-item">
            <text>{{ item }}</text>
            <!-- 根据是否在已选择城市列表中决定是否选中 -->
            <checkbox :value="item" :checked="checkedCities.includes(item)" />
          </view>
        </label>
      </block>
    </checkbox-group>
    <!-- 已选择的城市展示 -->
    <view class="selected-cities">Selected Cities: {{ checkedCities.join(', ') }}</view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 初始化城市列表
const cities = ref(['Shanghai', 'Beijing', 'Guangzhou']);
// 已选择的城市列表
const checkedCities = ref([]);

// 处理复选框变化事件
const handleCheckboxChange = (e) => {
  // 更新已选择的城市列表
  checkedCities.value = e.detail.value;
};

</script>

<style scoped>
/* 容器样式 */
.container {
  padding: 20rpx;
}

/* 复选框标签样式 */
.checkbox-label {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

/* 复选框项样式 */
.checkbox-item {
  flex: 1;
  display: flex;
  align-items: center;
}

/* 已选择城市样式 */
.selected-cities {
  margin-top: 20rpx;
  font-weight: bold;
}
</style>