uni-app购物车-全选、反选、逐个选中

这里要实现的需求是：
1，点击全选，则全选，再次点击，则取反
2，全选状态下，取消某一个商品，则全选状态消失
3，有些选中，有些没选的状态下，勾选上所有商品，则全选状态选中
3，商品无货状态下不允许选择，并且不影响全选反选

先看效果：

首先，用到了checkbox-group这个组件，看看官网API就好了，里面添加的内容是我自己的需求，自己随需求：

    
        
            
                
                
                    无货
                
            
            
                
                    
                
                
                    
                        {{item.name}}
                    
                    
                        品相优良
                        
                    
                    
                        
                            ￥{{item.price}}
                        
                        
                            
                                到货提醒
                            
                            
                                预定
                            
                            
                                锁定
                            
                        
                    
                    
                        
                    
                
            
        
    



    
         全选
    








allFlag: {
    value: 'cb',
    checked: false
},
carArr: [
    {
        value: 'USA',
        name: '摩根财团',
        price: '25.22',
        whether: true,
        src: 'http://img3m6.ddimg.cn/56/6/28519976-1_l_3.jpg'
    },
    {
        value: 'CHN',
        name: '中国高校之殇',
        price: '5.00',
        whether: true,
        src: 'http://img3m1.ddimg.cn/26/6/28510541-1_l_3.jpg'
    },
    {
        value: 'BRA',
        name: '华夏万军',
        price: '63.09',
        whether: true,
        src: 'http://img3m9.ddimg.cn/22/13/28495489-1_l_9.jpg'
    },
    {
        value: 'JPN',
        name: '音乐迷醉指南',
        price: '13.21',
        whether: true,
        src: 'http://img3m8.ddimg.cn/70/21/28509298-1_l_3.jpg'
    },
    {
        value: 'ENG',
        name: '纸上美术馆',
        price: '36.35',
        whether: true,
        src: 'http://img3m8.ddimg.cn/4/25/28500718-1_l_2.jpg'
    },
    {
        value: 'FRA',
        name: '艺术哲学',
        price: '14.36',
        whether: false,
        src: 'http://img3m8.ddimg.cn/40/9/23525608-1_l_4.jpg'
    },
    {
        value: 'BRAs',
        name: '华夏万军',
        price: '63.09',
        whether: false,
        src: 'http://img3m9.ddimg.cn/22/13/28495489-1_l_9.jpg'
    },
]







// 全选或者反选 checkbox
changeBook (e) {
    if (e.detail.value.length == 0) {
        this.carArr.map(item => this.$set(item, 'checked', false))
        this.$set(this.allFlag, 'checked', false)
    } else {
        this.carArr.map(item => this.$set(item, 'checked', true))
        this.$set(this.allFlag, 'checked', true)
    }
},
// list checkbox
checkboxChange (e) {
	var items = this.carArr,
		values = e.detail.value;
	for (var i = 0, lenI = items.length; i < lenI; ++i) {
		const item = items[i]
		if(values.includes(item.value)){
			this.$set(item,'checked',true)
		}else{
			this.$set(item,'checked',false)
		}
	}
	//  商品是否全部勾选，判断全选与否状态
	var offCarArr = []
	this.carArr.forEach(item => item.whether == true? offCarArr.push(item): '')
	let allChecks = offCarArr.every(item => item.checked == true)     
	allChecks ? this.$set(this.allFlag, 'checked', true) :this.$set(this.allFlag, 'checked', false)
},

就是这么多啦，欢迎提问，有帮助请点赞加关注，der~~