uniapp checkbox-group购物车全选

以下是使用uniapp checkbox-group实现购物车全选的示例代码：

1. 在template中添加checkbox-group和checkbox组件

<template>
  <view>
    <checkbox-group bindchange="selectAllChange">
      <checkbox value="all" checked="{{allSelected}}">全选</checkbox>
    </checkbox-group>

    <view v-for="(item, index) in cartList">
      <checkbox value="{{item.id}}" checked="{{item.selected}}" bindchange="selectChange">{{item.name}}</checkbox>
    </view>
  </view>
</template>

2. 在script中添加data属性和方法

<script>
export default {
  data() {
    return {
      cartList: [], // 购物车列表
      allSelected: false // 是否全选
    }
  },

  onShow() {
    // 获取购物车列表
    this.getCartList()
  },

  methods: {
    // 获取购物车列表
    getCartList() {
      // 省略获取购物车列表的代码
    },

    // 单个商品选中状态改变事件
    selectChange(event) {
      const id = event.target.value
      const selected = event.detail.value.length > 0

      // 更新购物车列表中对应商品的选中状态
      this.cartList = this.cartList.map(item => {
        if (item.id === id) {
          item.selected = selected
        }
        return item
      })

      // 判断是否全选
      this.checkAllSelected()
    },

    // 全选状态改变事件
    selectAllChange(event) {
      const selected = event.detail.value.length > 0

      // 更新购物车列表中所有商品的选中状态
      this.cartList = this.cartList.map(item => {
        item.selected = selected
        return item
      })

      // 更新全选状态
      this.allSelected = selected
    },

    // 检查是否全选
    checkAllSelected() {
      const selectedList = this.cartList.filter(item => item.selected)
      this.allSelected = selectedList.length === this.cartList.length
    }
  }
}
</script>

3. 在style中添加样式

<style>
  .uni-checkbox {
    margin-right: 10px;
  }
</style>

4. 注意事项

- checkbox-group组件中的value值需要设置为all，并且checked值绑定allSelected变量；
- checkbox组件中的value值需要设置为对应商品的id，并且checked值绑定商品的selected属性；
- selectChange方法中需要更新对应商品的selected属性，并调用checkAllSelected方法检查是否全选；
- selectAllChange方法中需要更新所有商品的selected属性，并更新allSelected变量；
- checkAllSelected方法中需要筛选出已选中的商品，判断是否全选。