购物车chenckbox的全选 全不选 部分选 反选功能实现 vue

子组件CkeckboxCommon.vue

 

<template>
  <input type="checkbox" class="checkbox" @change="checkboxToggle" :checked='value' />
</template>

<script>

  export default {
    name:'Checkbox',
    props: {
      value:{
        type:Boolean,
        default:false
      }
    },
    methods:{
      checkboxToggle(){
        this.$emit('input',!this.value)
        this.$emit('change')
      }

    }
  }
</script>
<style>
</style>

 

 

父组件购物车Car.vue

1.data里面先定义两个变量，一个是定义总的checkbox，一个是定义列表的checkbox

data () {
      return {

　　　　　　 checkboxtotal:false,

      　　  checkboxarray:[]

      }
},

2.给列表checkbox数组定义初始全不选

    checkboxtheArray(){

      this.checkboxarray = this.car.map(() => false);

    },

this.cart定义的是所有数据的一个数组

3.现在   总的checkbox和列表的checkbox的初始化都已经完成

4.给总的checkbox和列表的checkbox的分别添加事件

4.1.总的checkbox添加checkboxTotal事件

<checkbox-common @change="checkboxTotal" v-model='checkboxtotal'>商品</checkbox-common>

4.2.checkboxTotal事件的js代码

    checkboxTotal(){

      this.checkboxarray.fill(this.checkboxtotal)

    }

全选选中，列表的checkbox都选中

全选没有选中，列表的checkbox都没有选中

4.3.列表的checkbox添加onCheckChanged事件

        <li class="lineone">

          <checkbox-common @change="checkboxArray" v-model='checkboxarray[carindex]'></checkbox-common>

          <img :src="caritem.cover" alt="" width="100" height="100">

          <span>{{caritem.text}}</span>

        </li>

4.4.onCheckChanged事件的js代码

    checkboxArray(){

      this.checkboxarray.every(item => item) &&  (this.checkboxtotal = true) // 列表的checkbox都全部全选后，总的checkbox也全选

      this.checkboxarray.some(item => !item) &&  (this.checkboxtotal = false) // 列表的checkbox都全部都没有选中，总的checkbox没有选中

    },

 5.最后在mounted钩子函数运行checkboxtheArray函数

  mounted(){
    this.$nextTick(function(){this.checkboxtheArray();
    })
  },

 

效果图例展示：