本篇文章给大家带来了关于uniapp的相关知识，其中主要整理了实现多选框的全选功能的相关问题，无法实现全选的原因是动态修改checkbox的checked字段时，界面上的状态能够实时变化，但是无法触发checkbox-group的change事件，下面一起来看一下，希望对大家有帮助。
推荐：《uniapp教程》
uniapp内置的checkbox其实以及checkbox-group本来挺好的，但是有两个问题：
- 无法依赖其事件实现全选
- 样式固定，难以修改
他们无法实现全选的原因是：
我动态修改checkbox的checked字段时，界面上的状态能够实时变化，但是无法触发checkbox-group的change事件。意味着无法依赖checkbox-group管理好已选项。
就是说：我点了全选，界面上看着是全选了。然后此时我取消了其中一个选项，此时触发change事件，但是它反馈给我的已选列表是错的。这是不行的。
所以我自己想了个实现全选多选框的方案。
实现思路
鉴于上面的问题，于是就可以放弃checkbox-group了，那么，我顺便就放弃了checkbox，因为我更喜欢radio的圆圈样式。
首先先模拟生成一些数据，方便展示，数据的要点是要有一个字段selected，其余随心所欲：
<script setup lang="ts">
import { reactive } from "vue";
// 模拟的数据对象，要是响应式的
let data = reactive([] as { id: number; text: string; selected: boolean }[]);
// 生成数据
for (let i = 0; i < 10; i++) {
data.push({
id: i + 5,
text: "标题" + i,
selected: false,
});
}</script>然后我们需要有一个存储已选择数据信息的对象，采用map：
// 存储已选内容， 因为这个列表是增删很频繁的，所以选用map而不是数组，key对应的是数据的下标。至于value存放什么，完全由自己定
let selected = reactive(new Map<number, number>());在然后我们得有一个选项框点击事件，用于选择数据或者取消选择：
睿拓智能网站系统-网上商城1.0免费版软件大小:5M运行环境：asp+access本版本是永州睿拓信息专为电子商务入门级用户开发的网上电子商城系统，拥有产品发布，新闻发布，在线下单等全部功能，并且正式商用用户可在线提供多个模板更换，可实现一般网店交易所有功能，是中小企业和个人开展个人独立电子商务商城最佳的选择，以下为详细功能介绍：1.最新产品-提供最新产品发布管理修改，和最新产品订单查看2.推荐产
// 选项框点击事件，参数是数据的下标
function checkbox(index: number) {
// 选中的状态下再次点击，即为取消选中
if (data[index].selected) {
data[index].selected = false;
selected.delete(index); // 然后删除对应key即可
}
// 未选中状态下点击
else {
data[index].selected = true;
selected.set(index, data[index].id);
}
}再再然后，我们还得有一个全选的点击事件：
// 全选与反选事件
function allSelect() {
// 已经全选情况下，就是反选，全选就说明长度一样
if (selected.size === data.length) {
selected.clear(); // 全部清除
data.forEach((element) => {
element.selected = false; // 全部不选，就行了
});
}
// 还未全选的状态下
else {
data.forEach((element, index) => {
// 因为可能存在部分已经选择了，所以得先判断是否已存在，不存在才需要添加
if (!selected.has(index)) {
selected.set(index, element.id); // key是对应的下标index，而value是可以自定义的
element.selected = true; // 设为选中
}
});
}
}其实上面两个点击事件都是很基本的判断和增删数据。至此功能已经全部都有了，下面看看页面怎么写：
<template>
<!-- 是个多选列表 -->
<view v-for="(item, index) in data">
<label style="margin-left: 50px">
<radio :value="String(index)" :checked="item.selected" @click="checkbox(index)" />{{ item.text }} </label>
</view>
<!-- 全选按钮 -->
<label> <radio value="1" :checked="selected.size === data.length" @click="allSelect" />全选</label></template>其实就两组radio，一个是循环展示数据，一个是全选按钮。
连起来的完整代码：
<template>
<!-- 是个多选列表 -->
<view v-for="(item, index) in data">
<label style="margin-left: 50px">
<radio :value="String(index)" :checked="item.selected" @click="checkbox(index)" />{{ item.text }}
</label>
</view>
<!-- 全选按钮 -->
<label> <radio value="1" :checked="selected.size === data.length" @click="allSelect" />全选</label></template><script setup lang="ts">
import { reactive } from "vue";
// 模拟的数据对象，要是响应式的
let data = reactive([] as { id: number; text: string; selected: boolean }[]);
// 生成数据
for (let i = 0; i < 10; i++) {
data.push({
id: i + 5,
text: "标题" + i,
selected: false,
});
}
// 存储已选内容， 因为这个列表是增删很频繁的，所以选用map而不是数组，key对应的是数据的下标。至于value存放什么，完全由自己定
let selected = reactive(new Map<number, number>());
// 全选与反选事件
function allSelect() {
// 已经全选情况下，就是反选，全选就说明长度一样
if (selected.size === data.length) {
selected.clear(); // 全部清除
data.forEach((element) => {
element.selected = false; // 全部不选，就行了
});
}
// 还未全选的状态下
else {
data.forEach((element, index) => {
// 因为可能存在部分已经选择了，所以得先判断是否已存在，不存在才需要添加
if (!selected.has(index)) {
selected.set(index, element.id); // key是对应的下标index，而value是可以自定义的
element.selected = true; // 设为选中
}
});
}
}
// 选项框点击事件，参数是数据的下标
function checkbox(index: number) {
// 选中的状态下再次点击，即为取消选中
if (data[index].selected) {
data[index].selected = false;
selected.delete(index); // 然后删除对应key即可
}
// 未选中状态下点击
else {
data[index].selected = true;
selected.set(index, data[index].id);
}
}</script><style></style>看起来代码不少，其实都是很基础的逻辑判断。
最后效果是这样的：
全选：
多选：
反选全部：
推荐：《uniapp教程》
