vue.js实现checkbox全选

最新推荐文章于 2024-04-11 09:25:59 发布

原创最新推荐文章于 2024-04-11 09:25:59 发布 · 4.3k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #checkbox

移动开发专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的全选功能案例。通过监听checkbox的状态改变来更新数据模型，进而实现对列表中所有项的选择与取消选择。文章详细展示了如何在Vue环境中通过@click事件触发全选操作，并提供了完整的HTML及JavaScript代码。

<!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>