欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

使用jQuery实现购物车全选/全不操作、 选中与不选中商品购物车都会自动计算

程序员文章站 2022-03-06 13:38:21
...

使用jQuery实现全选、全不选操作:

首先写出购物车列表:

样式代码:
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6. 

  6.     <title>购物车</title>
    7. 

  7.     <!-- 导入外部css代码 -->
    8. 

  8.     <link rel="stylesheet" href="style.css" />
    9. 

  9.     <!-- 引入jQuery库 -->
    10. 

  10.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    11. 

  11.   </head>
    12. 

  12.   <body>
    13. 

  13.     <table>
    14. 

  14.       <caption>购物车</caption>
    15. 

  15.       <thead>
    16. 

  16.         <tr>
    17. 

  17.           <!-- 全选复选框 -->
    18. 

  18.           <th>
    19. 

  19.             <input
    20. 

  20.               type="checkbox"
    21. 

  21.               name="checkAll"
    22. 

  22.               id="check-all"
    23. 

  23.               checked
    24. 

  24.             /><label for="check-all">全选</label>
    25. 

  25.           </th>
    26. 

  26.           <th>图片</th>
    27. 

  27.           <th>品名</th>
    28. 

  28.           <th>单位</th>
    29. 

  29.           <th>单价/元</th>
    30. 

  30.           <th>数量</th>
    31. 

  31.           <th>金额/元</th>
    32. 

  32.         </tr>
    33. 

  33.       </thead>
    34. 

  34.       <tbody>
    35. 

  35.         <tr>
    36. 

  36.           <td>
    37. 

  37.             <input type="checkbox" name="item" value="SN-1020" checked />
    38. 

  38.           </td>
    39. 

  39.           <td>
    40. 

  40.             <a href=""><img src="images/p1.jpg" alt="" /></a>
    41. 

  41.           </td>
    42. 

  42.           <td>iPhone 11</td>
    43. 

  43.           <td>台</td>
    44. 

  44.           <td class="price">4799</td>
    45. 

  45.           <td><input type="number" min="1" value="1" /></td>
    46. 

  46.           <td class="amount">xxxx</td>
    47. 

  47.         </tr>
    48. 

  48.         <tr>
    49. 

  49.           <td>
    50. 

  50.             <input type="checkbox" name="item" value="SN-1020" checked />
    51. 

  51.           </td>
    52. 

  52.           <td>
    53. 

  53.             <a href=""><img src="images/p2.jpg" alt="" /></a>
    54. 

  54.           </td>
    55. 

  55.           <td>小米pro 11</td>
    56. 

  56.           <td>部</td>
    57. 

  57.           <td class="price">3999</td>
    58. 

  58.           <td><input type="number" min="1" value="2" /></td>
    59. 

  59.           <td class="amount">xxxx</td>
    60. 

  60.         </tr>
    61. 

  61.         <tr>
    62. 

  62.           <td>
    63. 

  63.             <input type="checkbox" name="item" value="SN-1030" checked />
    64. 

  64.           </td>
    65. 

  65.           <td>
    66. 

  66.             <a href=""><img src="images/p3.jpg" alt="" /></a>
    67. 

  67.           </td>
    68. 

  68.           <td>MacBook Pro</td>
    69. 

  69.           <td>台</td>
    70. 

  70.           <td class="price">18999</td>
    71. 

  71.           <td><input type="number" min="1" value="1" /></td>
    72. 

  72.           <td class="amount">xxxx</td>
    73. 

  73.         </tr>
    74. 

  74.         <tr>
    75. 

  75.           <td>
    76. 

  76.             <input type="checkbox" name="item" value="SN-1040" checked />
    77. 

  77.           </td>
    78. 

  78.           <td>
    79. 

  79.             <a href=""><img src="images/p4.jpg" alt="" /></a>
    80. 

  80.           </td>
    81. 

  81.           <td>小米75电视</td>
    82. 

  82.           <td>台</td>
    83. 

  83.           <td class="price">5999</td>
    84. 

  84.           <td><input type="number" min="1" value="2" /></td>
    85. 

  85.           <td class="amount">xxxx</td>
    86. 

  86.         </tr>
    87. 

  87.         <tr>
    88. 

  88.           <td>
    89. 

  89.             <input type="checkbox" name="item" value="SN-1050" checked />
    90. 

  90.           </td>
    91. 

  91.           <td>
    92. 

  92.             <a href=""><img src="images/p5.jpg" alt="" /></a>
    93. 

  93.           </td>
    94. 

  94.           <td>Canon 90D单反</td>
    95. 

  95.           <td>台</td>
    96. 

  96.           <td class="price">9699</td>
    97. 

  97.           <td><input type="number" min="1" value="1" /></td>
    98. 

  98.           <td class="amount">xxxx</td>
    99. 

  99.         </tr>
    100. 

  100.       </tbody>
    101. 

  101.       <tfoot>
    102. 

  102.         <tr style="font-weight: bolder; font-size: 1.2em">
    103. 

  103.           <td colspan="5">总计:</td>
    104. 

  104.           <td id="sum">xxxx</td>
    105. 

  105.           <td id="total-amount">xxxx</td>
    106. 

  106.         </tr>
    107. 

  107.       </tfoot>
    108. 

  108.     </table>
    109. 

  109.     <div style="width: 90%; margin: 10px auto">
    110. 

  110.       <button style="float: right; width: 100px">结算</button>
    111. 

  111.     </div>
    112. 

  112.   </body>
    113. 

  113. </html>
    114.

当前默认效果预览:

使用jQuery实现购物车全选/全不操作、 选中与不选中商品购物车都会自动计算

往body中添加srcipt样式代码:

    

  1. <script>
    2. 

  2.      // 使用jQuery完成购物车全选/全不选操作
    3. 

  3.     //先让checkbox全部选中
    4. 

  4.       $("#check-all").change(function () {
    5. 

  5.         $(":checkbox[name='item']").prop("checked", this.checked);
    6. 

  6.       });
    7. 

  7.     // 全选状态下,用户取消单个选中框,全选会自动取消
    8. 

  8.       $(":checkbox[name='item']").change((ev) =>
    9. 

  9.         $("#check-all").prop("checked", ev.target.checked)
    10. 

  10.       );
    11. 

  11. </script>
    12.

效果预览:

使用jQuery实现购物车全选/全不操作、 选中与不选中商品购物车都会自动计算

选中与不选都能自动计算:

在前面购物车列表body中添加样式代码:

    

  1. <script>
    2. 

  2.       // 1. 获取全选复选框,所有独立商品的复选框
    3. 

  3.       const checkAll = document.querySelector("#check-all");
    4. 

  4.       const checkItems = document.getElementsByName("item");
    5. 

  5.       // 2. 为全选复选框添加事件: change,当值改变会触发
    6. 

  6.       // console.log(ev.target.checked);  看当前全选的状态
    7. 

  7.       checkAll.onchange = (ev) =>
    8. 

  8.         checkItems.forEach((item) => (item.checked = ev.target.checked));
    9. 

  9.       // 3. 为每个单独的商品复选框添加change
    10. 

  10.       checkItems.forEach(
    11. 

  11.         (item) =>
    12. 

  12.           (item.onchange = () =>
    13. 

  13.             (checkAll.checked = [...checkItems].every((item) => item.checked)))
    14. 

  14.       );
    15. 

  15.       // 获取所有的数量控件
    16. 

  16.       const numInput = document.querySelectorAll('tbody input[type="number"');
    17. 

  17.       // 用户更新数量时触发自动计算
    18. 

  18.       numInput.forEach((input) => (onchange = autoCalculate));
    19. 

  19.       // 购物车刚加载完成时也应该触发自动计算
    20. 

  20.       window.onload = autoCalculate;
    21. 

  21.       // 封装一个自动计算的函数
    22. 

  22.       function autoCalculate() {
    23. 

  23.         // 获取单价组成的数组
    24. 

  24.         const prices = document.querySelectorAll("tbody .price");
    25. 

  25.         const priceArr = [...prices].map((item) => item.textContent * 1);
    26. 

  26.         console.log(priceArr);
    27. 

  27.         // 获取数量组成的数组
    28. 

  28.         const numbers = document.querySelectorAll("tbody input[type=number]");
    29. 

  29.         const numArr = [...numbers].map((item) => item.value * 1);
    30. 

  30.         console.log(numArr);
    31. 

  31.         //获取被商品选中状态数组,如果选中了,就是1,没选就是0:
    32. 

  32.         let unCheckItems = [];
    33. 

  33.         checkItems.forEach((item) => unCheckItems.push(item.checked));
    34. 

  34.         for (i = 0; i < unCheckItems.length; i++) {
    35. 

  35.           if (unCheckItems[i] === false) {
    36. 

  36.             unCheckItems[i] = 0;
    37. 

  37.           } else {
    38. 

  38.             unCheckItems[i] = 1;
    39. 

  39.           }
    40. 

  40.           console.log(unCheckItems);
    41. 

  41.         }
    42. 

  42.         //被选中的商品的数量数组 这个数组用来装选中商品的数量
    43. 

  43.         let checkedNumbers = [];
    44. 

  44.         let sum = 0;
    45. 

  45.         for (n = 0; n < numArr.length; n++) {
    46. 

  46.           checkedNumbers.push(numArr[n] * unCheckItems[n]);
    47. 

  47.         }
    48. 

  48.         console.log(checkedNumbers);
    49. 

  49.         //那么就得出被选中的商品总量应该是：
    50. 

  50.         sum = checkedNumbers.reduce((pre, cur) => pre + cur);
    51. 

  51.         console.log(sum);
    52. 

  52.         // 计算每件商品金额, 单价 * 数量
    53. 

  53.         let amountArr = [];
    54. 

  54.         for (i = 0; i < priceArr.length; i++) {
    55. 

  55.           amountArr.push(priceArr[i] * numArr[i]);
    56. 

  56.         }
    57. 

  57.         console.log(amountArr);
    58. 

  58.         let totalAmount = 0;
    59. 

  59.         // 被选中的商品的价格的数组
    60. 

  60.         let checkedPrice = [];
    61. 

  61.         for (g = 0; g < amountArr.length; g++) {
    62. 

  62.           checkedPrice.push(amountArr[g] * unCheckItems[g]);
    63. 

  63.         }
    64. 

  64.         console.log(checkedPrice);
    65. 

  65.         //那么所有被选中的商品的总价应当是：
    66. 

  66.         totalAmount = checkedPrice.reduce((pre, cur) => pre + cur);
    67. 

  67.         console.log(totalAmount);
    68. 

  68.         // 将计算结果渲染到购物车中
    69. 

  69.         // 被选中商品的总数量
    70. 

  70.         document.querySelector("#sum").textContent = sum;
    71. 

  71.         // 被选中商品的总金额
    72. 

  72.         document.querySelector("#total-amount").textContent = totalAmount;
    73. 

  73.         // 每个商品的金额
    74. 

  74.         document
    75. 

  75.           .querySelectorAll(".amount")
    76. 

  76.           .forEach((item, index) => (item.textContent = amountArr[index]));
    77. 

  77.       }
    78. 

  78. </script>
    79.

选中情况下效果预览:

使用jQuery实现购物车全选/全不操作、 选中与不选中商品购物车都会自动计算

不选情况下效果预览:

使用jQuery实现购物车全选/全不操作、 选中与不选中商品购物车都会自动计算

上一篇： 模仿京东网页(首页、页眉、导航、推荐)

下一篇： 两级普通list转树形结构

推荐阅读