您现在的位置是：网站首页> 编程资料编程资料

uniapp多选框全选功能的实现思路与方法实例_javascript技巧_

2023-05-24 579人已围观

简介 uniapp多选框全选功能的实现思路与方法实例_javascript技巧_

前言

uniapp内置的checkbox其实以及checkbox-group本来挺好的，但是有两个问题：

无法依赖其事件实现全选
样式固定，难以修改

他们无法实现全选的原因是：

我动态修改checkbox的checked字段时，界面上的状态能够实时变化，但是无法触发checkbox-group的change事件。意味着无法依赖checkbox-group管理好已选项。

就是说：我点了全选，界面上看着是全选了。然后此时我取消了其中一个选项，此时触发change事件，但是它反馈给我的已选列表是错的。这是不行的。

所以我自己想了个实现全选多选框的方案。

实现思路

鉴于上面的问题，于是就可以放弃checkbox-group了，那么，我顺便就放弃了checkbox，因为我更喜欢radio的圆圈样式。

首先先模拟生成一些数据，方便展示，数据的要点是要有一个字段selected，其余随心所欲：

然后我们需要有一个存储已选择数据信息的对象，采用map：

 // 存储已选内容， 因为这个列表是增删很频繁的，所以选用map而不是数组，key对应的是数据的下标。至于value存放什么，完全由自己定 let selected = reactive(new Map());

在然后我们得有一个选项框点击事件，用于选择数据或者取消选择：

 // 选项框点击事件，参数是数据的下标 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; // 设为选中 } }); } }

其实上面两个点击事件都是很基本的判断和增删数据。至此功能已经全部都有了，下面看看页面怎么写：

其实就两组radio，一个是循环展示数据，一个是全选按钮。

连起来的完整代码：

看起来代码不少，其实都是很基础的逻辑判断。

最后效果是这样的：

全选：