uni-app checkbox全选的实现

界面是这样的

需求

点击全选按钮上述全部选中,再次点击全部取消

解决方案

在js的data里面定义一个allCheck

    data() {
        return {
			allCheck:false,
        };
    },

上面商品的的checkbox都一样的配置

<checkbox class="check goods-check goodsCheck" style="border-radius: 50%;" :checked="allCheck"/>
<checkbox class="check goods-check goodsCheck" style="border-radius: 50%;" :checked="allCheck"/>
<checkbox class="check goods-check goodsCheck" style="border-radius: 50%;" :checked="allCheck"/>
<checkbox class="check goods-check goodsCheck" style="border-radius: 50%;" :checked="allCheck"/><checkbox class="check goods-check goodsCheck" style="border-radius: 50%;" :checked="allCheck"/>

全选的那个checkbox加个@click事件

<checkbox class="goods-check " id="AllCheck" style="margin-right: 10rpx;" @click="isChecked" :checked="allCheck"/>

js里面的方法

methods: {
	isChecked(e){
		if(this.allCheck==true){
			this.allCheck = false;
		} else {
			this.allCheck = true;
		}	
	}
}

效果