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

jQuery|原生js-分别购物车全选|全不选-勾选|不勾选自动计算

程序员文章站 2022-03-13 13:53:52
...

jQuery|原生js-分别购物车全选|全不选-勾选|不勾选自动计算

  1. 使用jQuery完成购物车全选/全不选操作;
  2. 这现勾选/不勾选商品时购物车也能自动完成计算
  • head 中引入购物车样式和jQuery库
    

  1. <!-- 购物车css样式 -->
    2. 

  2. <link rel="stylesheet" href="style.css" />
    3. 

  3. <!-- 引入 jQuery 库 -->
    4. 

  4. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    5.
  • 引入的购物车样式 style.css 是默认的
    

  1. table {
    2. 

  2.   border-collapse: collapse;
    3. 

  3.   width: 90%;
    4. 

  4.   text-align: center;
    5. 

  5.   margin: auto;
    6. 

  6. }
    7. 

    8. 

  8. table caption {
    9. 

  9.   margin-bottom: 15px;
    10. 

  10.   font-size: 1.5rem;
    11. 

  11. }
    12. 

    13. 

  13. table th,
    14. 

  14. table td {
    15. 

  15.   border-bottom: 1px solid #ccc;
    16. 

  16.   padding: 5px;
    17. 

  17.   font-weight: normal;
    18. 

  18. }
    19. 

    20. 

  20. table thead tr:first-of-type {
    21. 

  21.   background-color: #e6e6e6;
    22. 

  22.   height: 3em;
    23. 

  23. }
    24. 

    25. 

  25. table input[type="checkbox"] {
    26. 

  26.   width: 1.5em;
    27. 

  27.   height: 1.5em;
    28. 

  28. }
    29. 

    30. 

  30. table tbody tr {
    31. 

  31.   border-bottom: 1px solid #ccc;
    32. 

  32. }
    33. 

  33. table tbody tr:hover {
    34. 

  34.   background-color: #f6f6f6;
    35. 

  35.   cursor: pointer;
    36. 

  36. }
    37. 

    38. 

  38. tbody img {
    39. 

  39.   width: 3em;
    40. 

  40. }
    41. 

  41. tbody input[type="number"] {
    42. 

  42.   width: 3em;
    43. 

  43. }
    44. 

    45. 

  45. button {
    46. 

  46.   width: 150px;
    47. 

  47.   height: 30px;
    48. 

  48.   outline: none;
    49. 

  49.   border: none;
    50. 

  50.   background-color: teal;
    51. 

  51.   color: white;
    52. 

  52.   letter-spacing: 5px;
    53. 

  53. }
    54. 

  54. button:hover {
    55. 

  55.   opacity: 0.7;
    56. 

  56.   cursor: pointer;
    57. 

  57. }
    58.
  • body 中添加购物车html是默认的
    

  1. <table>
    2. 

  2.     <caption>
    3. 

  3.         购物车
    4. 

  4.     </caption>
    5. 

  5.     <thead>
    6. 

  6.         <tr>
    7. 

  7.             <!-- 全选复选框 -->
    8. 

  8.             <th><input type="checkbox" name="checkAll" id="check-all" checked /><label for="check-all">全选</label>
    9. 

  9.             </th>
    10. 

  10.             <th>图片</th>
    11. 

  11.             <th>品名</th>
    12. 

  12.             <th>单位</th>
    13. 

  13.             <th>单价/元</th>
    14. 

  14.             <th>数量</th>
    15. 

  15.             <th>金额/元</th>
    16. 

  16.         </tr>
    17. 

  17.     </thead>
    18. 

  18.     <tbody>
    19. 

  19.         <tr>
    20. 

  20.             <td>
    21. 

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

  22.             </td>
    23. 

  23.             <td>
    24. 

  24.                 <a href=""><img src="images/p1.jpg" alt="" /></a>
    25. 

  25.             </td>
    26. 

  26.             <td>iPhone 11</td>
    27. 

  27.             <td>台</td>
    28. 

  28.             <td class="price">4799</td>
    29. 

  29.             <td><input type="number" min="1" value="1" /></td>
    30. 

  30.             <td class="amount">xxxx</td>
    31. 

  31.         </tr>
    32. 

  32.         <tr>
    33. 

  33.             <td>
    34. 

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

  35.             </td>
    36. 

  36.             <td>
    37. 

  37.                 <a href=""><img src="images/p2.jpg" alt="" /></a>
    38. 

  38.             </td>
    39. 

  39.             <td>小米pro 11</td>
    40. 

  40.             <td>部</td>
    41. 

  41.             <td class="price">3999</td>
    42. 

  42.             <td><input type="number" min="1" value="2" /></td>
    43. 

  43.             <td class="amount">xxxx</td>
    44. 

  44.         </tr>
    45. 

  45.         <tr>
    46. 

  46.             <td>
    47. 

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

  48.             </td>
    49. 

  49.             <td>
    50. 

  50.                 <a href=""><img src="images/p3.jpg" alt="" /></a>
    51. 

  51.             </td>
    52. 

  52.             <td>MacBook Pro</td>
    53. 

  53.             <td>台</td>
    54. 

  54.             <td class="price">18999</td>
    55. 

  55.             <td><input type="number" min="1" value="1" /></td>
    56. 

  56.             <td class="amount">xxxx</td>
    57. 

  57.         </tr>
    58. 

  58.         <tr>
    59. 

  59.             <td>
    60. 

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

  61.             </td>
    62. 

  62.             <td>
    63. 

  63.                 <a href=""><img src="images/p4.jpg" alt="" /></a>
    64. 

  64.             </td>
    65. 

  65.             <td>小米75电视</td>
    66. 

  66.             <td>台</td>
    67. 

  67.             <td class="price">5999</td>
    68. 

  68.             <td><input type="number" min="1" value="2" /></td>
    69. 

  69.             <td class="amount">xxxx</td>
    70. 

  70.         </tr>
    71. 

  71.         <tr>
    72. 

  72.             <td>
    73. 

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

  74.             </td>
    75. 

  75.             <td>
    76. 

  76.                 <a href=""><img src="images/p5.jpg" alt="" /></a>
    77. 

  77.             </td>
    78. 

  78.             <td>Canon 90D单反</td>
    79. 

  79.             <td>台</td>
    80. 

  80.             <td class="price">9699</td>
    81. 

  81.             <td><input type="number" min="1" value="1" /></td>
    82. 

  82.             <td class="amount">xxxx</td>
    83. 

  83.         </tr>
    84. 

  84.     </tbody>
    85. 

  85.     <tfoot>
    86. 

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

  87.             <td colspan="5">总计:</td>
    88. 

  88.             <td id="sum">xxxx</td>
    89. 

  89.             <td id="total-amount">xxxx</td>
    90. 

  90.         </tr>
    91. 

  91.     </tfoot>
    92. 

  92. </table>
    93. 

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

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

  95. </div>
    96.

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

  • body 中 script 标签中添加js
    

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

  2. // 全选复选框
    3. 

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

  4. // 独立复选框
    5. 

  5. const checkItems = $("input[name=\"item\"]");
    6. 

    7. 

  7. // 改变全选，独立复选框也改变
    8. 

  8. checkAll.change(ev => checkItems.each(function () {
    9. 

  9.     $(this).prop('checked', $(ev.target).is(':checked'));
    10. 

  10. }));
    11. 

    12. 

  12. // 改变独立复选框，改变全选
    13. 

  13. checkItems.change(() => checkAll.prop('checked', [...checkItems].every(item => item.checked)));
    14.

jQuery|原生js-分别购物车全选|全不选-勾选|不勾选自动计算

2. 这现勾选/不勾选商品时购物车也能自动完成计算

  • 续写 jQuery 版购物车完成自动计算
    

  1. // 购物车，数据填充
    2. 

  2. function cart() {
    3. 

  3.     // 独立单价组
    4. 

  4.     let pricesObj = $('.price').map((i, ele) => $(ele).text() * 1);
    5. 

  5.     // 独立数量组
    6. 

  6.     let numbersObj = $('input[type="number"]').map((i, ele) => $(ele).val() * 1);
    7. 

  7.     // 独立金额组
    8. 

  8.     let amountsObj = [pricesObj, numbersObj].reduce((total, curr) => total.map((i, item) => item * curr[i]));
    9. 

    10. 

  10.     // 独立金额数据填充，由单品数量改变触发，与独立复选框状态无关
    11. 

  11.     $('.amount').each((i, ele) => ($(ele).text(amountsObj[i])));
    12. 

    13. 

  13.     // 总数量，总金额的计算由独立复选框选中状态确定
    14. 

    15. 

  15.     // 获取所有独立复选框元素
    16. 

  16.     let items = $("input[name=\"item\"]");
    17. 

  17.     // 过滤出所有独立复选框选中状态的组
    18. 

  18.     numbersObj = numbersObj.filter((i, ele) => $(items[i]).is(':checked'));
    19. 

  19.     // 过滤出所有独立复选框选中状态的金额组
    20. 

  20.     amountsObj = amountsObj.filter((i, ele) => $(items[i]).is(':checked'));
    21. 

    22. 

  22.     // 计算总数量和总金额
    23. 

  23.     let sum = [...numbersObj].reduce((p, n) => p + n, 0);
    24. 

  24.     let total = [...amountsObj].reduce((p, n) => p + n, 0);
    25. 

    26. 

  26.     // 填充总数量和总金额到页面中
    27. 

  27.     $('#sum').text(sum);
    28. 

  28.     $('#total-amount').text(total);
    29. 

  29. }
    30. 

    31. 

    32. 

  32. // 改变单品数量时触发
    33. 

  33. $('input[type="number"]').each((i, ele) => $(ele).change(function(){
    34. 

  34.     cart();
    35. 

  35. }));
    36. 

  36. // 改变独立复选框状态时触发
    37. 

  37. $("input[name=\"item\"]").each((i, item) => $(item).change(function(){
    38. 

  38.     cart();
    39. 

  39. }));
    40. 

  40. // 全选状态改变时触发
    41. 

  41. $('#check-all').change(function(){
    42. 

  42.     cart();
    43. 

  43. });
    44. 

  44. // 页面载入完成后触发
    45. 

  45. $(function(){
    46. 

  46.     cart();
    47. 

  47. });
    48.
  • 将以上 jQuery 版购物车全部注释，原生 js 版，完成自动计算
    

  1. // 原生js购物车全选/全不选操作
    2. 

  2. // 全选复选框
    3. 

  3. const checkAll = document.getElementById('check-all');
    4. 

  4. // 独立复选框
    5. 

  5. const checkItems = document.getElementsByName('item');
    6. 

    7. 

  7. // 改变全选，独立复选框也改变
    8. 

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

    10. 

  10. // 改变独立复选框，改变全选
    11. 

  11. checkItems.forEach(item => item.onchange = () => checkAll.checked = [...checkItems].every(ele => ele.checked));
    12. 

    13. 

  13. // 购物车，数据填充
    14. 

  14. function cart() {
    15. 

  15.     // 独立单价数组
    16. 

  16.     let pricesArr = [...document.getElementsByClassName('price')].map(p => p.textContent * 1);
    17. 

  17.     // 独立数量数组
    18. 

  18.     let numbersArr = [...document.querySelectorAll('input[type="number"]')].map(n => n.value * 1);
    19. 

  19.     // 独立金额数组
    20. 

  20.     let amountsArr = [pricesArr, numbersArr].reduce((total, curr) => total.map((item, i) => item * curr[i]));
    21. 

    22. 

  22.     // 独立金额数据填充，由单品数量改变触发，与独立复选框状态无关
    23. 

  23.     document.querySelectorAll('.amount').forEach((ele, i) => (ele.textContent = amountsArr[i]));
    24. 

    25. 

  25.     // 总数量，总金额的计算由独立复选框选中状态确定
    26. 

    27. 

  27.     // 获取所有独立复选框元素
    28. 

  28.     let items = document.getElementsByName('item');
    29. 

  29.     // 过滤出所有独立复选框选中状态的数量数组
    30. 

  30.     numbersArr = numbersArr.filter((ele, i) => [...items][i].checked);
    31. 

  31.     // 过滤出所有独立复选框选中状态的金额数组
    32. 

  32.     amountsArr = amountsArr.filter((ele, i) => [...items][i].checked);
    33. 

    34. 

  34.     // 计算总数量和总金额
    35. 

  35.     let sum = numbersArr.reduce((p, n) => p + n, 0);
    36. 

  36.     let total = amountsArr.reduce((p, n) => p + n, 0);
    37. 

    38. 

  38.     // 填充总数量和总金额到页面中
    39. 

  39.     document.getElementById('sum').textContent = sum;
    40. 

  40.     document.getElementById('total-amount').textContent = total;
    41. 

  41. }
    42. 

    43. 

  43. // 改变单品数量时触发
    44. 

  44. document.querySelectorAll('input[type="number"]').forEach(ele => ele.onchange = cart);
    45. 

  45. // 改变独立复选框状态时触发
    46. 

  46. document.getElementsByName('item').forEach(item => item.onchange = cart);
    47. 

  47. // 全选状态改变时触发
    48. 

  48. // 由于前面 check-all 已添加 onchange 事件，这里使用事件监听
    49. 

  49. document.getElementById('check-all').addEventListener('change', cart);
    50. 

  50. // 页面载入完成后触发
    51. 

  51. window.onload = cart;
    52.
  • 效果和 jQuery 版是一样的

jQuery|原生js-分别购物车全选|全不选-勾选|不勾选自动计算

  • 点击取消全选，数量和总金额清零

jQuery|原生js-分别购物车全选|全不选-勾选|不勾选自动计算

  • 只选中第2和第3个商品，将第3个商品数量改为2，改动其它未被选中的商品，不计算在总计内，只计算到右边独立商品的金额处

jQuery|原生js-分别购物车全选|全不选-勾选|不勾选自动计算

上一篇： cookie 保存和清除用户样式

下一篇： Box2d碰撞检测

推荐阅读