JavaScript: 购物车全选自动计算金额和取消全选清零金额

代码块

<script>
      //首先完成购物车的全选按钮和单个按钮进行绑定
      //拿到全选按钮
      let checkAll = document.querySelector("#check-all");
      //拿到单个按钮组 单个按钮只有name属性 所以用getElementsByName去拿
      let checkItem = document.getElementsByName("item");
      //测试是否拿到 已拿到
      //   console.log(checkAll, checkItem);
      //onchange 是属性改变时触发状态
      //将当前全选的状态变化赋值给单个按钮
      checkAll.onchange = (ev) => {
        checkItem.forEach((item) => (item.checked = ev.target.checked));
      };
      //将单个按钮的状态设置为：全部单个按钮选中则选中全选按钮，如果一个没有选中则取消全选按钮
      checkItem.forEach(
        (item) =>
          (item.onchange = () =>
            (checkAll.checked = [...checkItem].every((item) => item.checked)))
      );
      //设置一个自动计算的功能
      //首先拿到物品单价
      let itemsMoney = document.querySelectorAll("tbody .price");
      // 物品数量
      let itemsValue = document.querySelectorAll("input[type=number]");
      //用户跟新数量的时候自动计算
      // itemsMoney.forEach((input) => (onchange = autoSum));
      //  window.onload 页面加载完成之后自动计算
      // window.onload = autoSum;
      //测试是否拿到 已拿到
      //   console.log(money, itemsValue);
      // 设置一个自动计算函数
      function autoSum() {
        //map 有返回值，forEach没有
        //物品单价数组
        const itemsMoneys = [...itemsMoney].map(
          (money) => money.textContent * 1
        );
        //物品数量数组
        const itemsValues = [...itemsValue].map((value) => value.value * 1);
        //物品数量的总数
        let itemsSum = itemsValues.reduce((pre, cur) => pre + cur);
        //数量*单价 = 金额
        let autoArr = [itemsMoneys, itemsValues].reduce((total, curr) =>
          total.map((item, index) => item * curr[index])
        );
        //将计算结果渲染到页面中
        //总数量
        document.querySelector("#sum").textContent = `${itemsSum}`;
        //每个商品金额渲染到页面中
        document
          .querySelectorAll(".amount")
          .forEach((item, index) => (item.textContent = autoArr[index]));
        //将总金额渲染到页面中
        document.querySelector("#total-amount").textContent = `${autoArr.reduce(
          (pre, cur) => pre + cur
        )}`;
      }
      checkItem.forEach(
        (item) =>
          (item.onchange = () => {
            item.checked != false
              ? autoSum()
              : ((document.querySelector("#total-amount").textContent = 0),
                (document.querySelector("#sum").textContent = 0));
          })
      );
    </script>
JavaScript: 购物车全选自动计算金额和取消全选清零金额

JavaScript: 购物车全选自动计算金额和取消全选清零金额

代码块

更多相关文章

随机推荐
