亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 70
粉絲 1
評論 0
訪問量 67278
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
jQuery|原生js-分別購物車全選|全不選-勾選|不勾選自動計算
葡萄枝子
原創(chuàng)
1634人瀏覽過

jQuery|原生js-分別購物車全選|全不選-勾選|不勾選自動計算

  1. 使用jQuery完成購物車全選/全不選操作;
  2. 這現(xiàn)勾選/不勾選商品時購物車也能自動完成計算
  • head 中引入購物車樣式和jQuery庫
  1. <!-- 購物車css樣式 -->
  2. <link rel="stylesheet" href="style.css" />
  3. <!-- 引入 jQuery 庫 -->
  4. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  • 引入的購物車樣式 style.css 是默認(rèn)的
  1. table {
  2.   border-collapse: collapse;
  3.   width: 90%;
  4.   text-align: center;
  5.   margin: auto;
  6. }
  8. table caption {
  9.   margin-bottom: 15px;
  10.   font-size: 1.5rem;
  11. }
  13. table th,
  14. table td {
  15.   border-bottom: 1px solid #ccc;
  16.   padding: 5px;
  17.   font-weight: normal;
  18. }
  20. table thead tr:first-of-type {
  21.   background-color: #e6e6e6;
  22.   height: 3em;
  23. }
  25. table input[type="checkbox"] {
  26.   width: 1.5em;
  27.   height: 1.5em;
  28. }
  30. table tbody tr {
  31.   border-bottom: 1px solid #ccc;
  32. }
  33. table tbody tr:hover {
  34.   background-color: #f6f6f6;
  35.   cursor: pointer;
  36. }
  38. tbody img {
  39.   width: 3em;
  40. }
  41. tbody input[type="number"] {
  42.   width: 3em;
  43. }
  45. button {
  46.   width: 150px;
  47.   height: 30px;
  48.   outline: none;
  49.   border: none;
  50.   background-color: teal;
  51.   color: white;
  52.   letter-spacing: 5px;
  53. }
  54. button:hover {
  55.   opacity: 0.7;
  56.   cursor: pointer;
  57. }
  • body 中添加購物車html是默認(rèn)的
  1. <table>
  2.     <caption>
  3.         購物車
  4.     </caption>
  5.     <thead>
  6.         <tr>
  7.             <!-- 全選復(fù)選框 -->
  8.             <th><input type="checkbox" name="checkAll" id="check-all" checked /><label for="check-all">全選</label>
  9.             </th>
  10.             <th>圖片</th>
  11.             <th>品名</th>
  12.             <th>單位</th>
  13.             <th>單價/元</th>
  14.             <th>數(shù)量</th>
  15.             <th>金額/元</th>
  16.         </tr>
  17.     </thead>
  18.     <tbody>
  19.         <tr>
  20.             <td>
  21.                 <input type="checkbox" name="item" value="SN-1020" checked />
  22.             </td>
  23.             <td>
  24.                 <a href=""><img src="images/p1.jpg" alt="" /></a>
  25.             </td>
  26.             <td>iPhone 11</td>
  27.             <td>臺</td>
  28.             <td class="price">4799</td>
  29.             <td><input type="number" min="1" value="1" /></td>
  30.             <td class="amount">xxxx</td>
  31.         </tr>
  32.         <tr>
  33.             <td>
  34.                 <input type="checkbox" name="item" value="SN-1020" checked />
  35.             </td>
  36.             <td>
  37.                 <a href=""><img src="images/p2.jpg" alt="" /></a>
  38.             </td>
  39.             <td>小米pro 11</td>
  40.             <td>部</td>
  41.             <td class="price">3999</td>
  42.             <td><input type="number" min="1" value="2" /></td>
  43.             <td class="amount">xxxx</td>
  44.         </tr>
  45.         <tr>
  46.             <td>
  47.                 <input type="checkbox" name="item" value="SN-1030" checked />
  48.             </td>
  49.             <td>
  50.                 <a href=""><img src="images/p3.jpg" alt="" /></a>
  51.             </td>
  52.             <td>MacBook Pro</td>
  53.             <td>臺</td>
  54.             <td class="price">18999</td>
  55.             <td><input type="number" min="1" value="1" /></td>
  56.             <td class="amount">xxxx</td>
  57.         </tr>
  58.         <tr>
  59.             <td>
  60.                 <input type="checkbox" name="item" value="SN-1040" checked />
  61.             </td>
  62.             <td>
  63.                 <a href=""><img src="images/p4.jpg" alt="" /></a>
  64.             </td>
  65.             <td>小米75電視</td>
  66.             <td>臺</td>
  67.             <td class="price">5999</td>
  68.             <td><input type="number" min="1" value="2" /></td>
  69.             <td class="amount">xxxx</td>
  70.         </tr>
  71.         <tr>
  72.             <td>
  73.                 <input type="checkbox" name="item" value="SN-1050" checked />
  74.             </td>
  75.             <td>
  76.                 <a href=""><img src="images/p5.jpg" alt="" /></a>
  77.             </td>
  78.             <td>Canon 90D單反</td>
  79.             <td>臺</td>
  80.             <td class="price">9699</td>
  81.             <td><input type="number" min="1" value="1" /></td>
  82.             <td class="amount">xxxx</td>
  83.         </tr>
  84.     </tbody>
  85.     <tfoot>
  86.         <tr style="font-weight: bolder; font-size: 1.2em">
  87.             <td colspan="5">總計:</td>
  88.             <td id="sum">xxxx</td>
  89.             <td id="total-amount">xxxx</td>
  90.         </tr>
  91.     </tfoot>
  92. </table>
  93. <div style="width: 90%; margin: 10px auto">
  94.     <button style="float: right; width: 100px">結(jié)算</button>
  95. </div>

1. 使用jQuery完成購物車全選/全不選操作

  • body 中 script 標(biāo)簽中添加js
  1. // 使用jQuery完成購物車全選/全不選操作
  2. // 全選復(fù)選框
  3. const checkAll = $("#check-all");
  4. // 獨(dú)立復(fù)選框
  5. const checkItems = $("input[name=\"item\"]");
  7. // 改變?nèi)x，獨(dú)立復(fù)選框也改變
  8. checkAll.change(ev => checkItems.each(function () {
  9.     $(this).prop('checked', $(ev.target).is(':checked'));
  10. }));
  12. // 改變獨(dú)立復(fù)選框，改變?nèi)x
  13. checkItems.change(() => checkAll.prop('checked', [...checkItems].every(item => item.checked)));

jQuery全選全不選

2. 這現(xiàn)勾選/不勾選商品時購物車也能自動完成計算

  • 續(xù)寫 jQuery 版購物車完成自動計算
  1. // 購物車，數(shù)據(jù)填充
  2. function cart() {
  3.     // 獨(dú)立單價組
  4.     let pricesObj = $('.price').map((i, ele) => $(ele).text() * 1);
  5.     // 獨(dú)立數(shù)量組
  6.     let numbersObj = $('input[type="number"]').map((i, ele) => $(ele).val() * 1);
  7.     // 獨(dú)立金額組
  8.     let amountsObj = [pricesObj, numbersObj].reduce((total, curr) => total.map((i, item) => item * curr[i]));
  10.     // 獨(dú)立金額數(shù)據(jù)填充，由單品數(shù)量改變觸發(fā)，與獨(dú)立復(fù)選框狀態(tài)無關(guān)
  11.     $('.amount').each((i, ele) => ($(ele).text(amountsObj[i])));
  13.     // 總數(shù)量，總金額的計算由獨(dú)立復(fù)選框選中狀態(tài)確定
  15.     // 獲取所有獨(dú)立復(fù)選框元素
  16.     let items = $("input[name=\"item\"]");
  17.     // 過濾出所有獨(dú)立復(fù)選框選中狀態(tài)的組
  18.     numbersObj = numbersObj.filter((i, ele) => $(items[i]).is(':checked'));
  19.     // 過濾出所有獨(dú)立復(fù)選框選中狀態(tài)的金額組
  20.     amountsObj = amountsObj.filter((i, ele) => $(items[i]).is(':checked'));
  22.     // 計算總數(shù)量和總金額
  23.     let sum = [...numbersObj].reduce((p, n) => p + n, 0);
  24.     let total = [...amountsObj].reduce((p, n) => p + n, 0);
  26.     // 填充總數(shù)量和總金額到頁面中
  27.     $('#sum').text(sum);
  28.     $('#total-amount').text(total);
  29. }
  32. // 改變單品數(shù)量時觸發(fā)
  33. $('input[type="number"]').each((i, ele) => $(ele).change(function(){
  34.     cart();
  35. }));
  36. // 改變獨(dú)立復(fù)選框狀態(tài)時觸發(fā)
  37. $("input[name=\"item\"]").each((i, item) => $(item).change(function(){
  38.     cart();
  39. }));
  40. // 全選狀態(tài)改變時觸發(fā)
  41. $('#check-all').change(function(){
  42.     cart();
  43. });
  44. // 頁面載入完成后觸發(fā)
  45. $(function(){
  46.     cart();
  47. });
  • 將以上 jQuery 版購物車全部注釋，原生 js 版，完成自動計算
  1. // 原生js購物車全選/全不選操作
  2. // 全選復(fù)選框
  3. const checkAll = document.getElementById('check-all');
  4. // 獨(dú)立復(fù)選框
  5. const checkItems = document.getElementsByName('item');
  7. // 改變?nèi)x，獨(dú)立復(fù)選框也改變
  8. checkAll.onchange = ev => checkItems.forEach(item => item.checked = ev.target.checked);
  10. // 改變獨(dú)立復(fù)選框，改變?nèi)x
  11. checkItems.forEach(item => item.onchange = () => checkAll.checked = [...checkItems].every(ele => ele.checked));
  13. // 購物車，數(shù)據(jù)填充
  14. function cart() {
  15.     // 獨(dú)立單價數(shù)組
  16.     let pricesArr = [...document.getElementsByClassName('price')].map(p => p.textContent * 1);
  17.     // 獨(dú)立數(shù)量數(shù)組
  18.     let numbersArr = [...document.querySelectorAll('input[type="number"]')].map(n => n.value * 1);
  19.     // 獨(dú)立金額數(shù)組
  20.     let amountsArr = [pricesArr, numbersArr].reduce((total, curr) => total.map((item, i) => item * curr[i]));
  22.     // 獨(dú)立金額數(shù)據(jù)填充，由單品數(shù)量改變觸發(fā)，與獨(dú)立復(fù)選框狀態(tài)無關(guān)
  23.     document.querySelectorAll('.amount').forEach((ele, i) => (ele.textContent = amountsArr[i]));
  25.     // 總數(shù)量，總金額的計算由獨(dú)立復(fù)選框選中狀態(tài)確定
  27.     // 獲取所有獨(dú)立復(fù)選框元素
  28.     let items = document.getElementsByName('item');
  29.     // 過濾出所有獨(dú)立復(fù)選框選中狀態(tài)的數(shù)量數(shù)組
  30.     numbersArr = numbersArr.filter((ele, i) => [...items][i].checked);
  31.     // 過濾出所有獨(dú)立復(fù)選框選中狀態(tài)的金額數(shù)組
  32.     amountsArr = amountsArr.filter((ele, i) => [...items][i].checked);
  34.     // 計算總數(shù)量和總金額
  35.     let sum = numbersArr.reduce((p, n) => p + n, 0);
  36.     let total = amountsArr.reduce((p, n) => p + n, 0);
  38.     // 填充總數(shù)量和總金額到頁面中
  39.     document.getElementById('sum').textContent = sum;
  40.     document.getElementById('total-amount').textContent = total;
  41. }
  43. // 改變單品數(shù)量時觸發(fā)
  44. document.querySelectorAll('input[type="number"]').forEach(ele => ele.onchange = cart);
  45. // 改變獨(dú)立復(fù)選框狀態(tài)時觸發(fā)
  46. document.getElementsByName('item').forEach(item => item.onchange = cart);
  47. // 全選狀態(tài)改變時觸發(fā)
  48. // 由于前面 check-all 已添加 onchange 事件，這里使用事件監(jiān)聽
  49. document.getElementById('check-all').addEventListener('change', cart);
  50. // 頁面載入完成后觸發(fā)
  51. window.onload = cart;
  • 效果和 jQuery 版是一樣的

購物車1

  • 點(diǎn)擊取消全選，數(shù)量和總金額清零

購物車2

  • 只選中第2和第3個商品，將第3個商品數(shù)量改為2，改動其它未被選中的商品，不計算在總計內(nèi)，只計算到右邊獨(dú)立商品的金額處

購物車3

批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：jq中不要套原生，這樣不好，要分開寫
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)