购物车全选与自动计算参与结算的商品价格

购物车全选与自动计算参与结算的商品价格

  <table>
    <caption>
      购物车
    </caption>
    <thead>
      <tr>
        <!-- 全选复选框 -->
        <th><input type="checkbox" name="checkAll" id="check-all" /><label for="check-all">全选</label></th>
        <th>图片</th>
        <th>品名</th>
        <th>单位</th>
        <th>单价/元</th>
        <th>数量</th>
        <th>金额/元</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <input type="checkbox" name="item" value="SN-1020" />
        </td>
        <td>
          <a href=""><img src="../教学资料/0412/images/p1.jpg" alt="" /></a>
        </td>
        <td class="commodity">iPhone 11</td>
        <td>台</td>
        <td class="price">4799</td>
        <td><input type="number" min="1" value="1" /></td>
        <td class="amount"></td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="item" value="SN-1020" />
        </td>
        <td>
          <a href=""><img src="../教学资料/0412/images/p2.jpg" alt="" /></a>
        </td>
        <td class="commodity">小米pro 11</td>
        <td>部</td>
        <td class="price">3999</td>
        <td><input type="number" min="1" value="2" /></td>
        <td class="amount"></td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="item" value="SN-1030" />
        </td>
        <td>
          <a href=""><img src="../教学资料/0412/images/p3.jpg" alt="" /></a>
        </td>
        <td class="commodity">MacBook Pro</td>
        <td>台</td>
        <td class="price">18999</td>
        <td><input type="number" min="1" value="1" /></td>
        <td class="amount"></td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="item" value="SN-1040" />
        </td>
        <td>
          <a href=""><img src="../教学资料/0412/images/p4.jpg" alt="" /></a>
        </td>
        <td class="commodity">小米75电视</td>
        <td>台</td>
        <td class="price">5999</td>
        <td><input type="number" min="1" value="2" /></td>
        <td class="amount"></td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="item" value="SN-1050" />
        </td>
        <td>
          <a href=""><img src="../教学资料/0412/images/p5.jpg" alt="" /></a>
        </td>
        <td class="commodity">Canon 90D单反</td>
        <td>台</td>
        <td class="price">9699</td>
        <td><input type="number" min="1" value="1" /></td>
        <td class="amount"></td>
      </tr>
    </tbody>
    <tfoot>
      <tr style="font-weight: bolder; font-size: 1.2em">
        <td colspan="5">总计:</td>
        <td id="sum"></td>
        <td id="total-amount"></td>
      </tr>
    </tfoot>
  </table>
  <div style="width: 90%; margin: 10px auto">
    <button style="float: right; width: 100px">结算</button>
  </div>

// 全选框
    const checkAll = document.querySelector("#check-all");
    // 复选框
    const checkItems =document.getElementsByName("item");
    console.log(checkItems);
    //onchange 当按钮状态发生变化时
    // 将当前全选的状态变化赋值给每个商品
    checkAll.onchange = (ev) => checkItems.forEach((item) => (item.checked = ev.target.checked));
    // 为每个单独商品的复选框添加事件
    checkItems.forEach(
      // 给子选项添加状态变化事件
      (item) => (item.onchange = () => {
        // 全选按钮checkAll的状态
        // 使用归并[...]把所有子选项checked值并入数组，使用every()判断子选项是否全选，决定全选按钮checkAll的状态
        checkAll.checked = [...checkItems].every((item) => item.checked);
      })
    );
    // 获取所有商品的数量的选框
    const numberInput = document.querySelectorAll("table input[type=number]");
    // 添加onchange事件
    numberInput.forEach((input) => (onchange = autoCalculate));
    // 页面加载完立即执行
    window.onload = autoCalculate;
    // 根据复选框选中状态计算总金额和总数量 
    function autoCalculate(){
      // 生成购物车商品详情清单
    const shoping=[...checkItems].map(check => {
      // 获取商品名称
      const commodity = check.parentElement.parentElement.querySelector('table .commodity').textContent;
      // 获取单价
      const priceItem = check.parentElement.parentElement.querySelector('table .price').textContent;
      // 获取数量
      const numberItem = check.parentElement.parentElement.querySelector('table input[type=number]').value;
      // 添加复选框状态并生成购物车清单
      return check.checked ? {"商品":String(commodity),"单价":+priceItem,"数量":+numberItem,"单品合计":priceItem*numberItem,"是否结算":true} : {"商品":String(commodity),"单价":+priceItem,"数量":+numberItem,"单品合计":priceItem*numberItem,"是否结算":false};
    });
    // 输出单品合计总价
    shoping.forEach((item,index)=>document.querySelectorAll("table .amount")[index].textContent=item["单品合计"]);
    // 过滤出参与结算的商品
    let settlement = shoping.filter((item)=>item["是否结算"]===true);
    // 归并参与结算的商品总价
    let settlementArr = [...settlement].map((item)=>Number(item["单品合计"]));
    // 归并参与结算的商品数量
    let sumArr = [...settlement].map((item)=>Number(item["数量"]));
    // 计算并向页面输出结算总价
    document.getElementById("total-amount").textContent = settlementArr.length!=0 ? `￥${settlementArr.reduce((pre,cur)=>pre + cur)}` : "￥0";
    // 计算并向页面输出结算的总数
    document.getElementById("sum").textContent = sumArr.length!=0 ? `${sumArr.reduce((pre,cur)=>pre + cur)}件` : "0件";
  }