JavaScript: 購(gòu)物車全選自動(dòng)計(jì)算金額和取消全選清零金額

代碼塊

<script>
      //首先完成購(gòu)物車的全選按鈕和單個(gè)按鈕進(jìn)行綁定
      //拿到全選按鈕
      let checkAll = document.querySelector("#check-all");
      //拿到單個(gè)按鈕組 單個(gè)按鈕只有name屬性 所以用getElementsByName去拿
      let checkItem = document.getElementsByName("item");
      //測(cè)試是否拿到 已拿到
      //   console.log(checkAll, checkItem);
      //onchange 是屬性改變時(shí)觸發(fā)狀態(tài)
      //將當(dāng)前全選的狀態(tài)變化賦值給單個(gè)按鈕
      checkAll.onchange = (ev) => {
        checkItem.forEach((item) => (item.checked = ev.target.checked));
      };
      //將單個(gè)按鈕的狀態(tài)設(shè)置為：全部單個(gè)按鈕選中則選中全選按鈕，如果一個(gè)沒有選中則取消全選按鈕
      checkItem.forEach(
        (item) =>
          (item.onchange = () =>
            (checkAll.checked = [...checkItem].every((item) => item.checked)))
      );
      //設(shè)置一個(gè)自動(dòng)計(jì)算的功能
      //首先拿到物品單價(jià)
      let itemsMoney = document.querySelectorAll("tbody .price");
      // 物品數(shù)量
      let itemsValue = document.querySelectorAll("input[type=number]");
      //用戶跟新數(shù)量的時(shí)候自動(dòng)計(jì)算
      // itemsMoney.forEach((input) => (onchange = autoSum));
      //  window.onload 頁面加載完成之后自動(dòng)計(jì)算
      // window.onload = autoSum;
      //測(cè)試是否拿到 已拿到
      //   console.log(money, itemsValue);
      // 設(shè)置一個(gè)自動(dòng)計(jì)算函數(shù)
      function autoSum() {
        //map 有返回值，forEach沒有
        //物品單價(jià)數(shù)組
        const itemsMoneys = [...itemsMoney].map(
          (money) => money.textContent * 1
        );
        //物品數(shù)量數(shù)組
        const itemsValues = [...itemsValue].map((value) => value.value * 1);
        //物品數(shù)量的總數(shù)
        let itemsSum = itemsValues.reduce((pre, cur) => pre + cur);
        //數(shù)量*單價(jià) = 金額
        let autoArr = [itemsMoneys, itemsValues].reduce((total, curr) =>
          total.map((item, index) => item * curr[index])
        );
        //將計(jì)算結(jié)果渲染到頁面中
        //總數(shù)量
        document.querySelector("#sum").textContent = `${itemsSum}`;
        //每個(gè)商品金額渲染到頁面中
        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>

批改老師：天蓬老師

批改狀態(tài)：合格

老師批語：