商城项目--全选,反选 vue2.x+JQ代码（俩种实现方式）

本文链接：https://blog.csdn.net/Facing_the_Giants/article/details/77992621

Hello 大家好我是杨小宝！最近刚刚接手公司内一个商城项目，里面一些业务逻辑其实学习与记录一下挺好的，如果你也正好做商城类似的项目，看一下我们有相同的问题吗？

首先这个全选，反选一开始做的时候我进入了一个盲区就是一直想判断每一个checkbox选中的状态全等于true的时候要 All => checkbox 在等于true。虽然看似很简单的一个逻辑缺让我想的很复杂！那一下看一下我们正确的代码以及逻辑思路把！

这里给大家做了一个小demo 当然数据还是按照项目需要写的。

<script type="text/javascript" src="vue.js"></script>
<body>
    <div id="box">
        <div id="allbox">
            <input type="checkbox" @click='all()' v-model='checkedAll'>全选</input>
        </div>
        <div v-for='list in Lists'>
            <input type="checkbox" :value='list.id' v-model='ischeckdate'>{{list.name}}</input>
        </div>
    </div>
</body>

我先把vue中data数据单独写出来然后看一下页面先不写逻辑思路！

        data:{
            Lists:[
                {id:1,name:'1111'},
                {id:2,name:'2222'},
                {id:3,name:'3333'},
                {id:4,name:'4444'}
            ],
            checkedAll:'',   // 这个checkedAll绑定的是全选input的v-model
            ischeckdate:[]   // 用数组绑定 '商品'列表 input的v-model

        },

页面图：
这里写图片描述

Vue逻辑：
首先我们要考虑项目实现的需求跟业务逻辑：
1. 我们’商品’列表里面的数据都是’活’的就是说请求接口获取的数据
2. 当我们点击全选这个checkbox这个input要让下面四个input 全部选中，在次点击全部不选中
3. 我们依次点击’商品’列表cheakbox当点击最后一个时候’全选’这个checkbox被选中
4. 当我们四个’商品’列表都被选中的时候在点击其中一个让全选的checkbox 成未false

一步步进入我们的VueJS代码：

//需求一二解决：
//我们给全选一个点击事件，@click='all()'
        methods:{
            all(){
                var ischeckdate = [];
                if (this.checkedAll) {
                    this.Lists.forEach((item)=>{
                        ischeckdate.push(item.id)
                    })
                }
                this.ischeckdate  = ischeckdate;
                console.log(this.ischeckdate)
            }
        }
// 这个判断 就是如果All选中了为true 那么循环 所有的'商品'列表 给我们的空数组添加对应的id，这里要注意一点'商品'列表中的value 必须要绑定我们对于的id值。

//需求三四解决：
//我们用到了vue中的watch的监听api
        watch:{
            ischeckdate:{
                handler(newVal){
                    console.log(newVal)  // 打开控制台查看我们的newVal值
                    if (this.Lists.length === this.ischeckdate.length) {
                        this.checkedAll = true;
                    }else{
                        this.checkedAll  = false;
                    }
                }
            }
        }
// 这里的思路是，当我选中某一个'商城'列表后把对应的id传入我们一开始定义的空数组中ischeckdate然后我们判断我们所有的数据的长度是否跟我们的这个定义的空数组长度一致，如果一致那么全选为true，如果不一致那么false！！

大体的思路给大家整理了一下，很好理解的。接下来附上所有代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <div id="box">
        <div id="allbox">
            <input type="checkbox" @click='all()' v-model='checkedAll'>全选</input>
        </div>
        <div v-for='list in Lists'>
            <input type="checkbox" :value='list.id' v-model='ischeckdate'>{{list.name}}</input>
        </div>
    </div>
</body>
<script type="text/javascript">
    var vm = new  Vue({
        el:'#box',
        data:{
            Lists:[
                {id:1,name:'1111'},
                {id:2,name:'2222'},
                {id:3,name:'3333'},
                {id:4,name:'4444'}
            ],
            checkedAll:'',
            ischeckdate:[]

        },
        methods:{
            all(){
                var ischeckdate = [];
                if (this.checkedAll) {
                    this.Lists.forEach((item)=>{
                        ischeckdate.push(item.id)
                    })
                }
                this.ischeckdate  = ischeckdate;
                console.log(this.ischeckdate)
            }
        },
        watch:{
            ischeckdate:{
                handler(newVal){
                    console.log(newVal)
                    if (this.Lists.length === this.ischeckdate.length) {
                        this.checkedAll = true;
                    }else{
                        this.checkedAll  = false;
                    }
                }
            }
        }
    })
</script>
</html>

其实我还在考虑局部监听很全局监听$watch 有什么区别？？本来就想写一个在写一个全部监听的，后来感觉没必要一个样。那么在送给大家同过JQ写的代码跟上面实现的效果一样！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
    <p><input name="Fruit" type="checkbox" value="" />   111</p>
    <p><input name="Fruit" type="checkbox" value="" />   222</p>
    <p><input name="Fruit" type="checkbox" value="" />   333</p>
    <p><input name="Fruit" type="checkbox" value="" />   444</p>
    <p><input name="checkbox" type="checkbox" value=""  class="btn-al btn" />   全选</p>
    <!-- <p><input name="checkbox" type="checkbox" value=""  class="btn-re btn" />   反选</p> -->
</body>
<script type="text/javascript">
    $(function(){
        var $Input = $('input[type="checkbox"]').not('.btn');

        // 反选
        // $('.btn-re').on('click',function(){
        //  var bool = true;

        //  $Input.prop('checked',function(index, value){
        //      return !value;
        //  });

        //  $(this).prop('checked',false);

        //  $Input.each(function(index, item){
        //      bool = bool && $(item).prop('checked');
        //  });
        //  if(bool){
        //      $('.btn-al').prop('checked', true);
        //  }else{
        //      $('.btn-al').prop('checked', false);
        //  }

        // });

        // 全选
        $('.btn-al').on('click',function(){
            var bool = true;
            $Input.each(function(index, item){
                bool = bool && $(item).prop('checked');
            });
            if(bool){
                $Input.prop('checked',false);
                $(this).prop('checked',false);
            }else{
                $Input.prop('checked',true);
                $(this).prop('checked',true);
            }
        })

        // 单选
        $Input.on('click',function(){
            var bool = true;
            $Input.each(function(index, item){
                bool = bool && $(item).prop('checked');
            });
            if(bool){
                $('.btn-al').prop('checked', true);
            }else{
                $('.btn-al').prop('checked', false);
            }
        })
    })
</script>
</html>