vue实现全选和反选

吃葡萄不吐葡萄皮嘻嘻

已于 2022-01-19 09:39:40 修改

阅读量674

点赞数 1

分类专栏： vue 文章标签： vue

于 2021-07-22 16:45:27 首次发布

本文链接：https://blog.csdn.net/qq_45695853/article/details/119002945

版权

vue 专栏收录该内容

73 篇文章 3 订阅

订阅专栏

效果图如下：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现全选和反选</title>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        form{
            width: 300px;
            border:1px solid pink;
            user-select: none;
        }
        form div:first-child{
            line-height: 40px;
            background: skyblue;
            display: flex;
            align-items: center;
            
        }
        form div:first-child input{
            margin-right: 10px;
        }
        form div:first-child label{
           flex:1;
        }
        form .bg{
            background:#eee;
            display: flex;
            line-height: 40px;
            border-bottom: 1px dashed #fff;
            align-items: center;
        }
        .bg input{
            margin-right: 10px;
        }
        .bg label{
            flex:1;
        }
    </style>
</head>

<body>
    <div id="app">
        <form action="">
            <div>
                <input type="checkbox" id="checkAll" v-model="isCheckAll" @change="changeAll">
                <label for="checkAll">全选</label>
            </div>
            <div v-for="(item,index) in list" :key="index" class="bg">
                <input type="checkbox" :id="item.id" :value="item.name" v-model="item.check" @change="invertSelection">
                <label :for="item.id">{{item.name}}</label>
            </div>
        </form>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data() {
                return {
                    isCheckAll:false,
                    list:[
                        {id:"apple",name:'苹果',check:false},
                        {id:"banana",name:'香蕉',check:false},
                        {id:"orange",name:'橘子',check:true},
                        {id:"durian",name:'榴莲',check:false},
                        {id:"grape",name:'葡萄',check:false},
                        {id:" watermelon",name:'苹果',check:false},
                    ]
                }
            },
            methods:{
                // 全选
                changeAll(){
                    this.list.forEach(item => {
                        item.check = this.isCheckAll
                    });
                },
                //反选
                invertSelection(){
                    //方法一：
                    //获取选中的状态，有几个被选中
                    var changeLength = this.list.filter(item=>item.check).length 
                    console.log(changeLength);
                    if(changeLength==this.list.length){
                        this.isCheckAll = true
                    }else{
                        this.isCheckAll = false
                    }

                    //方法二一行代码：
                    //this.isCheckAll = this.list.every(item=>item.check)
                }
            }
        })
    </script>

</body>

</html>

实现思路：
全选：获取全选按钮的状态；打勾：子选项全打勾，取消打勾：子选项不打勾；
子选项按钮：获取有几个是选中的，如全部选中则全选按钮勾上，反之不勾上；
在这里插入图片描述

吃葡萄不吐葡萄皮嘻嘻

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue实现全选和反选

效果图如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
复制链接

扫一扫