前端购物车的全选功能小tips

场景：我们在做购物车功能的时候，需要实现全选功能。

① 点击全选按钮，则所有商品变为被选中的状态；

② 当所有商品被选中后，取消某商品的选中状态，则全选按钮变为未选中状态

③ 手动将所有商品点为选中状态，则全选按钮变为选中状态

总体分为以下两种情况：

目录

一、修改商品选中状态改变全选按钮状态

二、修改全选按钮改变商品的选中状态

一、修改商品选中状态改变全选按钮状态

购物车商品列表往往是一个数组对象的形式，需要我们前端将商品信息渲染到页面上，要想实现全选功能，可以对所有数组项进行遍历，将他们的选中状态变为true，数组有一个很好用的方法，即 every

every 方法用于检测数组所有元素是否都符合某个条件。如果所有元素都符合条件，则返回 true，否则返回 false。

array.every(function(element,index,array), thisArg)

• function 是要执行的函数，对于数组中的每个元素执行，该函数接收三个参数，分别是：

1. element 数组中当前传递的元素。

2. index （可选）数组中当前传递的元素的索引。

3. array （可选） every 方法被调用的数组。

• thisArg （可选） 执行 callback 时用于 this 的值

我们将全选按钮绑定一个属性，假如这个属性为 isSelectedAll ，我们可以通过vue的计算属性来得到 isSelectedAll 的值，通过遍历购物车列表，即下面的 cartList ，来判断里面的数据是否是选中的状态，如是全部都是选中的状态，则返回true，全选按钮被选中；如果不是，则返回false，全选按钮没有被选中

const isSelectedAll = computed(() => {
  return cartList.value.every(v => v.selected)
})

二、修改全选按钮改变商品的选中状态

将全选按钮绑定一个点击事件 onChangeSelectedAll ，点击全选按钮之后，全选状态取反，然后遍历所有的商品，将他们的选中状态同步为全选按钮的状态

const onChangeSelectedAll = () => {
  const _isSelectedAll = !isSelectedAll.value;
  cartList.value.forEach(v => {
    v.selected = _isSelectedAll;
  })
}

以上是前端静态页面显示效果，接口上的数据结构大家都各不相同，这里就不赘述了。