Vue实现checkbox的全选和取消全选

最新推荐文章于 2024-08-15 11:10:34 发布

大表哥6

最新推荐文章于 2024-08-15 11:10:34 发布

阅读量5.3k

点赞数 1

分类专栏： vue HTML js node 文章标签：前端 VUE

本文链接：https://blog.csdn.net/big_borther6/article/details/84984459

版权

js 同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

HTML

12 篇文章 0 订阅

订阅专栏

vue

10 篇文章 0 订阅

订阅专栏

html

关键：复选按钮绑定同一个v-mode数组变量，数组里面有相应的value就被选中，选择就自动把:value="item.id"值添加到数组，取消就自动删除这个值。

    <div>
      <!--给全选按钮绑定v-mode变量，值为true时就是选中状态，绑定点击事件，执行全选和反选操作-->
      <input type='checkbox'  v-model='checked' @click='checkedAll'>全选
      <div v-for="item in data1">
        <!--给每个复选按钮绑定同一个v-mode数组变量，数组里面有相应的value就被选中-->
        <input type='checkbox' v-model='arr' :value="item.id" @click="fn2()">{{item.value}}
      </div>
    </div>

    data(){
      return{

          data1:[{
            id:'1',
            value:'苹果'
          },{
            id:'2',
            value:'荔枝'
          },{
            id:'3',
            value:'香蕉'
          },{
            id:'4',
            value:'火龙果'
          }],
          arr:[],
          checked: false,
        }

    },   
 methods:{
      //神奇的setTimeout 伪装异步
      fn2(){
        setTimeout(() => console.log(this.arr))
      },
      checkedAll: function() {
        if (this.checked) {//实现反选
          this.arr = [];
        } else { //实现全选
          this.arr = [];
          this.data1.forEach( (item) => {
            this.arr.push(item.id);
          });
        }
        setTimeout(() => console.log(this.arr))
      }
    },
    watch: { //深度 watcher
      arr: {
        handler: function (val, oldVal) {
          if (this.arr.length === this.data1.length) {
            this.checked=true;
          } else {
            this.checked=false;
          }
        },
        deep: true
      }


    }