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

  1.   <table>
  2.     <caption>
  3.       购物车
  4.     </caption>
  5.     <thead>
  6.       <tr>
  7.         <!-- 全选复选框 -->
  8.         <th><input type="checkbox" name="checkAll" id="check-all" /><label for="check-all">全选</label></th>
  9.         <th>图片</th>
  10.         <th>品名</th>
  11.         <th>单位</th>
  12.         <th>单价/元</th>
  13.         <th>数量</th>
  14.         <th>金额/元</th>
  15.       </tr>
  16.     </thead>
  17.     <tbody>
  18.       <tr>
  19.         <td>
  20.           <input type="checkbox" name="item" value="SN-1020" />
  21.         </td>
  22.         <td>
  23.           <a href=""><img src="../教学资料/0412/images/p1.jpg" alt="" /></a>
  24.         </td>
  25.         <td class="commodity">iPhone 11</td>
  26.         <td>台</td>
  27.         <td class="price">4799</td>
  28.         <td><input type="number" min="1" value="1" /></td>
  29.         <td class="amount"></td>
  30.       </tr>
  31.       <tr>
  32.         <td>
  33.           <input type="checkbox" name="item" value="SN-1020" />
  34.         </td>
  35.         <td>
  36.           <a href=""><img src="../教学资料/0412/images/p2.jpg" alt="" /></a>
  37.         </td>
  38.         <td class="commodity">小米pro 11</td>
  39.         <td>部</td>
  40.         <td class="price">3999</td>
  41.         <td><input type="number" min="1" value="2" /></td>
  42.         <td class="amount"></td>
  43.       </tr>
  44.       <tr>
  45.         <td>
  46.           <input type="checkbox" name="item" value="SN-1030" />
  47.         </td>
  48.         <td>
  49.           <a href=""><img src="../教学资料/0412/images/p3.jpg" alt="" /></a>
  50.         </td>
  51.         <td class="commodity">MacBook Pro</td>
  52.         <td>台</td>
  53.         <td class="price">18999</td>
  54.         <td><input type="number" min="1" value="1" /></td>
  55.         <td class="amount"></td>
  56.       </tr>
  57.       <tr>
  58.         <td>
  59.           <input type="checkbox" name="item" value="SN-1040" />
  60.         </td>
  61.         <td>
  62.           <a href=""><img src="../教学资料/0412/images/p4.jpg" alt="" /></a>
  63.         </td>
  64.         <td class="commodity">小米75电视</td>
  65.         <td>台</td>
  66.         <td class="price">5999</td>
  67.         <td><input type="number" min="1" value="2" /></td>
  68.         <td class="amount"></td>
  69.       </tr>
  70.       <tr>
  71.         <td>
  72.           <input type="checkbox" name="item" value="SN-1050" />
  73.         </td>
  74.         <td>
  75.           <a href=""><img src="../教学资料/0412/images/p5.jpg" alt="" /></a>
  76.         </td>
  77.         <td class="commodity">Canon 90D单反</td>
  78.         <td>台</td>
  79.         <td class="price">9699</td>
  80.         <td><input type="number" min="1" value="1" /></td>
  81.         <td class="amount"></td>
  82.       </tr>
  83.     </tbody>
  84.     <tfoot>
  85.       <tr style="font-weight: bolder; font-size: 1.2em">
  86.         <td colspan="5">总计:</td>
  87.         <td id="sum"></td>
  88.         <td id="total-amount"></td>
  89.       </tr>
  90.     </tfoot>
  91.   </table>
  92.   <div style="width: 90%; margin: 10px auto">
  93.     <button style="float: right; width: 100px">结算</button>
  94.   </div>
  1. // 全选框
  2.     const checkAll = document.querySelector("#check-all");
  3.     // 复选框
  4.     const checkItems =document.getElementsByName("item");
  5.     console.log(checkItems);
  6.     //onchange 当按钮状态发生变化时
  7.     // 将当前全选的状态变化赋值给每个商品
  8.     checkAll.onchange = (ev) => checkItems.forEach((item) => (item.checked = ev.target.checked));
  9.     // 为每个单独商品的复选框添加事件
  10.     checkItems.forEach(
  11.       // 给子选项添加状态变化事件
  12.       (item) => (item.onchange = () => {
  13.         // 全选按钮checkAll的状态
  14.         // 使用归并[...]把所有子选项checked值并入数组，使用every()判断子选项是否全选，决定全选按钮checkAll的状态
  15.         checkAll.checked = [...checkItems].every((item) => item.checked);
  16.       })
  17.     );
  18.     // 获取所有商品的数量的选框
  19.     const numberInput = document.querySelectorAll("table input[type=number]");
  20.     // 添加onchange事件
  21.     numberInput.forEach((input) => (onchange = autoCalculate));
  22.     // 页面加载完立即执行
  23.     window.onload = autoCalculate;
  24.     // 根据复选框选中状态计算总金额和总数量 
  25.     function autoCalculate(){
  26.       // 生成购物车商品详情清单
  27.     const shoping=[...checkItems].map(check => {
  28.       // 获取商品名称
  29.       const commodity = check.parentElement.parentElement.querySelector('table .commodity').textContent;
  30.       // 获取单价
  31.       const priceItem = check.parentElement.parentElement.querySelector('table .price').textContent;
  32.       // 获取数量
  33.       const numberItem = check.parentElement.parentElement.querySelector('table input[type=number]').value;
  34.       // 添加复选框状态并生成购物车清单
  35.       return check.checked ? {"商品":String(commodity),"单价":+priceItem,"数量":+numberItem,"单品合计":priceItem*numberItem,"是否结算":true} : {"商品":String(commodity),"单价":+priceItem,"数量":+numberItem,"单品合计":priceItem*numberItem,"是否结算":false};
  36.     });
  37.     // 输出单品合计总价
  38.     shoping.forEach((item,index)=>document.querySelectorAll("table .amount")[index].textContent=item["单品合计"]);
  39.     // 过滤出参与结算的商品
  40.     let settlement = shoping.filter((item)=>item["是否结算"]===true);
  41.     // 归并参与结算的商品总价
  42.     let settlementArr = [...settlement].map((item)=>Number(item["单品合计"]));
  43.     // 归并参与结算的商品数量
  44.     let sumArr = [...settlement].map((item)=>Number(item["数量"]));
  45.     // 计算并向页面输出结算总价
  46.     document.getElementById("total-amount").textContent = settlementArr.length!=0 ? `￥${settlementArr.reduce((pre,cur)=>pre + cur)}` : "￥0";
  47.     // 计算并向页面输出结算的总数
  48.     document.getElementById("sum").textContent = sumArr.length!=0 ? `${sumArr.reduce((pre,cur)=>pre + cur)}件` : "0件";
  49.   }

更多相关文章

  1. 0412作业-购物车
  2. CCKS 2020「基于标题的大规模商品实体检索」竞赛冠军，DeepBlueAI
  3. 使用flex仿写手机首页
  4. 210326 flex布局 仿写
  5. 思迈特软件Smartbi_大数据分析软件在销售中的应用
  6. flex弹性盒模型常用项目属性及仿写移动端京东首页
  7. 1.flex项目上的三个属性、2。移动商城
  8. 淘宝首页flex仿写
  9. 推荐系统：石器与青铜时代

随机推荐

  1. android stdio Error Could not find com
  2. Android 自定义充电动画
  3. android edittext属性说明
  4. 尝试 Android Bilibili/ijkplayer
  5. android testing （三）————关于Android
  6. Android平台上利用opencv进行图像的缩放
  7. AndroidManifest.xml
  8. 二十二、android中application标签说明
  9. Android 如何屏蔽Home键
  10. 移植soundtouch到android 通过JNI来调用