checkbox-group是一个用于管理一组复选框的组件。它允许用户同时选择多个选项，并可以通过事件监听来获取用户的选择结果
-
引入组件: 在uni-app中，不需要单独引入组件，可以直接在模板中使用
checkbox-group和checkbox标签。 -
使用
checkbox-group: 在模板中添加checkbox-group标签，并通过事件监听器来处理用户的选择行为。 -
使用
checkbox: 在checkbox-group内部添加多个checkbox标签，并设置它们的value属性。 -
监听
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>
)
