js、vue、uniapp全选与反选

最新推荐文章于 2025-03-20 16:53:18 发布

开心宝贝one

最新推荐文章于 2025-03-20 16:53:18 发布

阅读量940

点赞数

文章标签：前端 vue.js

本文链接：https://blog.youkuaiyun.com/m0_59419496/article/details/126166822

版权

本文介绍了如何使用js、vue.js和uniapp实现全选和反选功能。点击全选按钮会同步改变所有子项的状态，反之，子项的改变也会更新全选按钮的选中状态。实现过程中，通过遍历和状态判断确保全选和反选逻辑的正确执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现的效果：

点击全选按钮，让上面的小按钮都随着全选按钮的变化而变化，上面的小按钮有一个没有选中，则下面的全选按钮就是false，如果上面的小按钮都为选中状态，则下面的全选按钮也为选中状态

实现思路

1、实现全选

为下面的全选按钮定义一个变量，点击下面的全选按钮，然后遍历上面的小按钮，让他们的状态跟着全选按钮的状态来变换，

2、实现反选

上面的小按钮发生的点击事件，如果，点击了这个按钮让他变为了false，则直接让全选按钮变为false，如果点击了变为true，则遍历其他的小按钮，如果有一个为false，则可以直接return出去，如果全为true，则全选按钮可以变为true

代码：

<script>
	export default {
		data() {
			return {
				num: 0,
				isloading:true,
				list: [{
					name: '奥特曼1',
					num: 6,
					price: 50,
					id: 1,
					status: false,
				}, {
					name: '奥特曼2',