vue的全选与反选

最新推荐文章于 2024-04-02 19:39:43 发布

mystraight

最新推荐文章于 2024-04-02 19:39:43 发布

阅读量754

点赞数 1

分类专栏： Vue-的全选与反选

本文链接：https://blog.csdn.net/qq_35568483/article/details/59112509

版权

Vue-的全选与反选专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" src = "vue.js"></script>
<body>
        <div id = "test">
            <input type='checkbox' v-model="checkBox.checked" class='input-checkbox' @click='checkedAll'>全选
            <div v-for='checkb in checkboxData'>
                <input   type='checkbox' class='input-checkbox' @click="checkItem" v-model='checkBox.items[checkb.id]'>
                {{checkb.value}}
            </div>

        </div>

</body>
<script>
    var vue = new  Vue({
        el:"#test",
        data:{
            checkboxData:[
            {
                id:'1',
                value:'苹果'
            },{
                id:'2',
                value:'荔枝'
            },{
                id:'3',
                value:'香蕉'
            },{
                id:'4',
                value:'火龙果'
            }
            ],
            checkBox:{
                checked:false,
                items:{}
            }

        },
        methods:{
            checkedAll: function() {
                var _this = this;
                console.log(_this.checkboxData);
                console.log(this.checkBox.items);
                this.checkboxData.forEach(function (item) {
                    console.log(item.id);
                    _this.checkBox.items[item.id] = _this.checkBox.checked;
                    console.log(_this.checkBox.items);
                });
                //实现反选

            },
            checkItem:function(){
               var  unchecked = 0;
                var _this = this;
                this.checkboxData.forEach(
                    function(item) {
                        unchecked += (!  _this.checkBox.items[item.id]) || 0;
                    });
                _this.checkBox.checked = unchecked > 0 ? false : true;
            }

        }

    })
</script>

</html>

mystraight

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue的全选与反选

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><script type="text/javascript" src = "vue.js"></script><body> <div id = "test">
复制链接

扫一扫

专栏目录