界面是这样的
需求
点击全选按钮上述全部选中,再次点击全部取消
解决方案
在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;
}
}
}
效果