微信小程序购物车全选反选功能以及合计

微信小程序基于Vant Weapp的购物车功能实现

1、单选

使用微信小程序原生表单组件checkbox和checkbox-group

注意：checkbox原生不支持bind:change事件，checkbox-group支持

html 复制代码

<checkbox-group bindchange="handleCheck">
    <checkbox value="1" checked="{{isCheck1}}"></checkbox>
    <checkbox value="2" checked="{{isCheck2}}"></checkbox>
    <checkbox value="3" checked="{{isCheck3}}"></checkbox>
</checkbox-group>

需要在checkbox-group上绑定bind:change事件，并在checkbox标签上赋值value属性

js 复制代码

  handleCheck(event) {
    // 所有选中的商品的value
    let checkedIds = event.detail.value;  //['1']
  },

进行单选操作时，在change事件的参数中可以获取到所有在checkbox-group中被选中的元素的value值组成的数组

2、全选

在实现全选功能时，一般全选只有一个复选框，但是也需要套一个checkbox-group，利用原生的微信小程序封装好的bind:change事件，可以更加方便的实现功能

js 复制代码

<checkbox-group bindchange="handleCheckAll">
          <checkbox checked="{{allCheck}}" value="{{true}}" />
</checkbox-group>

全选框需要帮定一个参数动态存储复选框的状态，并在change事件中修改这个状态，以及控制其他可选框的状态和全选框一致

js 复制代码

handleCheckAll(event){
    this.setData({
     	allCheck: !this.data.allCheck,
     	isCheck1: !this.data.allCheck,
        isCheck2: !this.data.allCheck,
        isCheck3: !this.data.allCheck
    })
},

注意：这里看上去虽然没有用上checkbox-group的参数，但是解决了在复选框上绑定点击事件覆盖原生可选框的功能

3、全选和单选联动

在前面已经完成单选和全选的独立功能了，但是无法实现在选中所有单选的复选框时全选框也选中，

所有的单选框选没有选中时，全选框同时取消

实现思路：一般购物车的数据是根据数据渲染出来的，所以可以获取到所有商品的数量，与单选checkbx-group的回调函数中的参数进行对比，如果选中的数量小于总数，则设置全选框为false，如果选中的数量等于总数，则设置全选框为true。

实例代码：

js 复制代码

handleCheck(event) {
    // 所有选中的商品的value
    let checkedIds = event.detail.value;
    // 全部商品的数量
    const length = this.data.shopList.length
    if(checkedIds.length < length){
      this.setData({
        allCheck: false
      })
    }else if(checkedIds.length == length){
      this.setData({
        allCheck: true
      })
    }
}

4、总价的计算

对于总价计算，需要在进行单选和全选时都要进行更新total，所以需要封装成一个函数，在进行操作的回调函数中调用，实现总价的实时更新

js 复制代码

  render() {
    const priceShop = this.data.shopList.filter(ele => ele.isCheck === true)
    const total = priceShop.reduce((acc, cur) => {
      const value = cur.num * parseInt(cur.finVersion[1], 10); // 确保 parseInt 有一个基数，这里使用 10
      return acc + value;
    }, 0); // 初始化累加器为 0
    this.setData({
      allPrice: total
    })
  },

在render函数中先获取所有被选中的单选框，并使用reduce方法将每个数据中的数量和单价相乘并累加，然后使用setData方法更新total值，实现合计的更新

js 复制代码

//单选的回调
handleCheckAll(event){
	...
	render()
},
//全选的回调
handleCheck(event) {
    ...
    render()
}

最终效果：