vue全選和取消全選

本文轉載自查看原文 2019-04-02 11:56 733

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <div id="app">
            <div v-for="list,index in lists">
                <label :for="index">
                    {{list.name}}<input :id="index" type="checkbox" :value="list.name" v-model="checkboxArr"> //這里注意list.name這個值一定要和checkAll函數中綁定的紅色的值要一樣
                </label>
            </div>
        <label>
            <input type="checkbox" class="checkbox" @click="selectAll" />{{checkAllAddTxt}}
        </label>
    </div>
    <script src="vue.js"></script>
    <script>
        window.onload = function () {
            var c = new Vue({
                el: '#app',
                data: {
                    checkboxArr: [],
                    lists: [{ // lists是從接口拿到的要遍歷帶有checkbox的數據
                        'name': '111'
                    }, {
                        'name': '222'
                    }, {
                        'name': '333'
                    }, {
                        'name': '444'
                    }],
                    checkAllAddTxt: '全選' // 作為全選 取消全選的顯示文字
                },
                methods: {
                    selectAll: function (event) {
                        var _this = this;
                        if (!event.currentTarget.checked) {
                            this.checkboxArr = []; // 取消全選
                            this.checkAllAddTxt = '全選';
                        } else { // 實現全選
                            _this.checkboxArr = [];
                            _this.lists.forEach(function (list, i) {
                                _this.checkboxArr.push(list.name);
                            });
                            this.checkAllAddTxt = '取消全選';
                        }
                    }
                }
            });
        };
    </script>
</body>

</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue 全選與取消全選 vue el-select全選、取消全選 js全選與取消全選 input全選和取消全選 html全選和取消全選JS JS對checkbox全選和取消全選 html checkbox 實現全選/取消全選效果微信小程序全選和取消全選復選框全選或取消全選 JS實現表單全選以及取消全選實例