uniapp实现---类似购物车全选

���录

一、实现思路

二、实现步骤

        ①view部分展示

        ②JavaScript 内容

        ③css中样式展示

三、效果展示

四、小结 + 注意事项

---

一、实现思路

        点击商家复选框，可选中当前商家下的所有商品。点击全选，选中全部商家的商品

添加单个多选框，在将多选框绑定到全选按钮上。

uniapp内置的checkbox以及checkbox-group：

        无法依赖其事件实现全选，样式固定，难以修改。

 

二、实现步骤

        ①view部分展示

               

全选{{item.name}}学号：{{item.number}}{{item.num}}

        ②JavaScript 内容

        

export default {data() {return {checkList: [], //选中值allChecked: false, //是否全选title: 'checkbox 复选框',itemsList: [{name: '美国',number: "20030303",num: "90",checked: false}, {name: '美国',number: "20030303",num: "90",checked: false}, {name: '美国',number: "20030303",num: "90",checked: false}, {name: '美国',number: "20030303",num: "90",checked: false}, ]}},methods: {//单选changeitem(item) {item.checked = !item.checkedif (!item.checked) {this.allChecked = false} else {// 判断每一个列表是否是被选择的状态const cartList = this.itemsList.every(item => {return item.checked === true})if (cartList) {this.allChecked = true} else {this.allChecked = false}}},//全选，全不选selectAll() {this.allChecked = !this.allCheckedif (this.allChecked) {this.itemsList.map(item => {item.checked = true})} else {this.itemsList.map(item => {item.checked = false})}},},}

        ③css中样式展示

.checkboxAll {margin-left: 80%;margin-top: 24rpx;}.uni-list-cell {justify-content: flex-start;}

三、效果展示

        可以全部选择的状态，也可以是单选状态。

               

四、小结 + 注意事项

        u-checkbox-group标签中u-checkbox没有插槽，不支持在里面写内容，必须在u-checkbox-group外面写内容布局。u-checkbox-group--->u-checkbox是可以实现的。