vuejs实现checkbox全选和全不选

最近一直在用vue，有个功能是要实现全选和取消全选的功能，于是想了一下要怎么做。
效果如下：
这里写图片描述
代码如下：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue实现checkbox全选和全不选</title>
    <script type="text/javascript" src="../lib/vue.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-1.11.3.min.js"></script>
    <style>

        #table {
            width:600px;
            height:200px;
            margin:100px auto;
        }
        #table label{
            padding:10px;
            font-size:16px;
            border:1px solid #ccc;
        }
        #table label input{
            height:20px;
            width:20px;
        }
        #table .active{
            color:red;
        }
    </style>
</head>

<body>
    <div id="table">
        <p>
            <label :class="check.length == ball.length ? 'active' : ''"><input type="checkbox" v-model="all.flag" @click.stop="allchoosed()">{{all.label}}</label>
        </p>
        <p>
            <label v-for="(item, index) in ball"><input type="checkbox"  v-model="check" :value="item.id" @click.stop="checkChoose()">{{item.label}}</label> 
        </p>
        <h1>提交的id数组：{{check}}</h1>
    </div>
</body>

</html>
<script>
    var v = new Vue({
        el: "#table",
        data: {
            check: [],
            ball: [{
                id: 1,
                label: '篮球',
                flag: false
            },{
                id: 2,
                label: '足球',
                flag: true
            },{
                id: 3,
                label: '乒乓球',
                flag: false
            },{
                id: 4,
                label: '桌球',
                flag: true
            }],
            all:{
                flag: false,
                label: '全选'
            }
        },
        methods: {

            checkChoose: function() {
                var _this = this;
                _this.all.flag = (_this.check.length == _this.ball.length) ? true : false;
                _this.all.label = (_this.check.length == _this.ball.length) ? '取消全选' : '全选';
            },
            allchoosed: function(){
                var _this = this;
                if(_this.all.flag){
                    _this.check = [];
                    _this.ball.forEach(function(item, index){
                        _this.check.push(item.id);
                    });
                    _this.all.flage = true;
                    _this.all.label = '取消全选';
                }else{
                    _this.ball.forEach(function(item, index){
                        _this.check = [];
                    });
                    _this.all.flage = false;
                    _this.all.label = '全选';
                }
            }
        },
        created: function(){
            var _this = this;
            var flag = true;
            //载入时判断是否为全选状态
            _this.ball.forEach(function(item, indx){
                if(item.flag){
                    _this.check.push(item.id);
                }
            });
            _this.all.flag = (_this.check.length == _this.ball.length) ? true : false;
            _this.all.label = (_this.check.length == _this.ball.length) ? '取消全选' : '全选';

        }
    });
</script>
vuejs实现checkbox全选和全不选

猜你喜欢
