购物车单选计算

购物车单选判断

---

1.图片效果

2.代码

<script>
      // 1. 全选
      function checkAll() {
        // 1. 全选按钮状态
        let status = event.target.checked;
        // console.log(status);
        // 2. 根据状态动态设置所有商品的状态
        let items = document.querySelectorAll(
          '.list li input[type="checkbox"]'
        );
        items.forEach((item) => (item.checked = status));
        setTimeout(autoCalculate, 100);
      }
      // 2. 根据用户选择来动态设置全选状态
      function checkItems() {
        // 1.  拿到全部商品
        let items = document.querySelectorAll(
          '.list li input[type="checkbox"]'
        );
        setTimeout(autoCalculate, 100);
        // 2. 判断状态,只有全部被选择,才需要设置全选为true, array.every
        let status = [...items].every((item) => item.checked === true);
        document.querySelector(".check-all").checked = status;
      }
      let items = document.querySelectorAll('.list li input[type="checkbox"]');
      function getChoice(numArr) {
        return numArr.map((num, index) => {
          //判断商品是否被选中 选中的话返回正常数组 否则返回0
          if (items[index].checked === false) {
            return (num = 0);
          } else {
            return num;
          }
        });
      }
      const nums = document.querySelectorAll(".num");
      // 1. 计算总数量
      function getTotalNum(numArr) {
        //将参数传到getChoice函数里面进行判断 再返回值
        numArr = getChoice(numArr);
        return numArr.reduce((acc, cur) => acc + cur);
      }
      // 2. 计算每个商品的金额
      function getAmount(numArr, priceArr) {
        // 金额 = 数量 * 单价
        return numArr.map((num, index) => num * priceArr[index]);
      }
      // 3. 计算总金额
      function getTotalAmount(amountArr) {
        //将参数传到getChoice函数里面进行判断 再返回值
        amountArr = getChoice(amountArr);
        return amountArr.reduce((acc, cur) => acc + cur);
      }
      // 4. 自动计算
      function autoCalculate() {
        // 商品数量数组
        const numArr = [...nums].map((num) => parseInt(num.value));
        // 单价数组
        const prices = document.querySelectorAll(".price");
        const priceArr = [...prices].map((price) =>
          parseInt(price.textContent)
        );
        // 金额数组
        const amountArr = getAmount(numArr, priceArr);
        // 总数量
        console.log(getTotalNum(numArr));
        document.querySelector(".total-num").textContent = getTotalNum(numArr);
        // 总金额
        document.querySelector(".total-amount").textContent =
          getTotalAmount(amountArr);
        // 为每个商品填充金额
        document
          .querySelectorAll(".amount")
          .forEach((amount, index) => (amount.textContent = amountArr[index]));
      }
      // 当页面加载的时候自动计算
      window.onload = autoCalculate;
      // 当数量更新时,自动计算所有数据
      nums.forEach((num) => (num.onchange = autoCalculate));
      // 作业 : 只计算选中商品的金额,同时更新总数量和总金额
    </script>