给购物车加上选择时自动计算功能

给购物车加上选择时自动计算功能，分为两种情况：全选改变和单个商品选择改变。

全选复选框状态改变
全选取消时，所有商品数量清零，全选时，所有商品数量设为1；
单个商品复选框状态改变
取消选中时，对应商品数量设为0，选中时，数量设为1。

// 全选复选框
const checkAll = document.querySelector("#check-all");
// 获取每行的复选框
const checkItems = document.querySelectorAll(".item");
// 获取全部数量框
const numInput = document.querySelectorAll('input[type="number"]');
checkAll.onchange = (ev) => {
  checkItems.forEach((item) => {
    item.checked = ev.target.checked;
    if (ev.target.checked) {
      numInput.forEach((num) => (num.value = 1));
    } else {
      numInput.forEach((num) => (num.value = 0));
    }
    // 调用自动运算函数
    autoCallculate();
  });
};
// 每一行的复选框状态发生变化时，检查是否全部选中，修改对应数量框的数值
checkItems.forEach(function (item, index) {
  item.onchange = function (ev) {
    checkAll.checked = [...checkItems].every(function (item) {
      return item.checked;
    });
    if (ev.target.checked) {
      // 恢复选中，商品数量变为1
      numInput[index].value = 1;
    } else {
      // 取消选中时，商品数量变为0
      numInput[index].value = 0;
    }
    // 调用自动运算函数
    autoCallculate();
  };
});

更多相关文章

随机推荐