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

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

data () {return{

isAllChecked:false,

checkedArray: []

}

},

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

setCheckedArray () {this.checkedArray = this.cart.map(() => false)

},

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

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

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

4.1.总的checkbox添加onAllCheckChanged事件

商品

4.2.onAllCheckChanged事件的js代码

onAllCheckChanged () {this.checkedArray.fill(this.isAllChecked)

},

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

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

4.3.列表的checkbox添加onCheckChanged事件

 

{{ item.text }}

4.4.onCheckChanged事件的js代码

onCheckChanged () {this.checkedArray.every(item => item) && (this.isAllChecked = true) // 列表的checkbox都选中，全选选中this.checkedArray.some(item => !item) && (this.isAllChecked = false)// 列表的checkbox都没有选中，全选没有被选中

},

原文：https://www.cnblogs.com/pwindy/p/13272849.html