vue.js实现checkbox全选

最新推荐文章于 2024-03-20 09:55:16 发布

timofun

最新推荐文章于 2024-03-20 09:55:16 发布

阅读量4.2k

点赞数

分类专栏：移动开发文章标签： vue.js checkbox

本文链接：https://blog.csdn.net/timofun/article/details/70789633

版权

移动开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script>
        window.onload = function () {
            var c = new Vue({
                el:'.box',
                data:{
                    selectArr: [],
                    proData:[{
                        "name": "111"
                    }, {
                        "name": "222"
                    }, {
                        "name": "333"
                    }, {
                        "name": "444"
                    }]
                },
                methods:{
                    selectAll:function (event) {
                        var _this = this;
                        console.log(event.currentTarget)
                        if (!event.currentTarget.checked) {
                            this.selectArr = [];
                        } else { //实现全选
                            _this.selectArr = [];
                            _this.proData.forEach(function(item, i) {
                                _this.selectArr.push(item.name);
                            });
                        }
                    }
                }
            })
        }

    </script>
</head>
<body>
    <div class="box">
        <div class="hello">
            <ul>
                <li v-for="(index, item) in proData">
                    <label :for="index">
                        <input :id="index" type="checkbox" :value="item.name" v-model="selectArr">
                    </label>{{item.name}}
                </li>：
            </ul>
            <button type="">删除</button>{{selectArr}}
            <label>
                <input type="checkbox" class="checkbox" @click="selectAll" />全选
            </label>
        </div>
    </div>
</body>
</html>