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

搜索
博主信息
博文 47
粉絲 3
評論 0
訪問量 49539
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
jQuery完成購物車全選/不全選、實現(xiàn)勾選/不勾選商品時購物車自動完成計算
吳
原創(chuàng)
1617人瀏覽過

1.jQuery完成購物車全選/不全選

  1. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>jquery購物車全選與不全選</title>
  7.     </title>
  8.     <link rel="stylesheet" href="style.css" />
  9.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  10. </head>
  12. <body>
  13.     <table>
  14.         <caption>
  15.             購物車
  16.         </caption>
  17.         <thead>
  18.             <tr>
  19.                 <!-- 全選復(fù)選框 -->
  20.                 <th><input type="checkbox" name="checkAll" id="check-all" checked /><label for="check-all">全選</label>
  21.                 </th>
  22.                 <th>圖片</th>
  23.                 <th>品名</th>
  24.                 <th>單位</th>
  25.                 <th>單價/元</th>
  26.                 <th>數(shù)量</th>
  27.                 <th>金額/元</th>
  28.             </tr>
  29.         </thead>
  30.         <tbody>
  31.             <tr>
  32.                 <td>
  33.                     <input type="checkbox" name="item" value="SN-1020" checked />
  34.                 </td>
  35.                 <td>
  36.                     <a href=""><img src="images/p1.jpg" alt="" /></a>
  37.                 </td>
  38.                 <td>iPhone 11</td>
  39.                 <td>臺</td>
  40.                 <td class="price">4799</td>
  41.                 <td><input type="number" min="1" value="1" /></td>
  42.                 <td class="amount">xxxx</td>
  43.             </tr>
  44.             <tr>
  45.                 <td>
  46.                     <input type="checkbox" name="item" value="SN-1020" checked />
  47.                 </td>
  48.                 <td>
  49.                     <a href=""><img src="images/p2.jpg" alt="" /></a>
  50.                 </td>
  51.                 <td>小米pro 11</td>
  52.                 <td>部</td>
  53.                 <td class="price">3999</td>
  54.                 <td><input type="number" min="1" value="2" /></td>
  55.                 <td class="amount">xxxx</td>
  56.             </tr>
  57.             <tr>
  58.                 <td>
  59.                     <input type="checkbox" name="item" value="SN-1030" checked />
  60.                 </td>
  61.                 <td>
  62.                     <a href=""><img src="images/p3.jpg" alt="" /></a>
  63.                 </td>
  64.                 <td>MacBook Pro</td>
  65.                 <td>臺</td>
  66.                 <td class="price">18999</td>
  67.                 <td><input type="number" min="1" value="1" /></td>
  68.                 <td class="amount">xxxx</td>
  69.             </tr>
  70.             <tr>
  71.                 <td>
  72.                     <input type="checkbox" name="item" value="SN-1040" checked />
  73.                 </td>
  74.                 <td>
  75.                     <a href=""><img src="images/p4.jpg" alt="" /></a>
  76.                 </td>
  77.                 <td>小米75電視</td>
  78.                 <td>臺</td>
  79.                 <td class="price">5999</td>
  80.                 <td><input type="number" min="1" value="2" /></td>
  81.                 <td class="amount">xxxx</td>
  82.             </tr>
  83.             <tr>
  84.                 <td>
  85.                     <input type="checkbox" name="item" value="SN-1050" checked />
  86.                 </td>
  87.                 <td>
  88.                     <a href=""><img src="images/p5.jpg" alt="" /></a>
  89.                 </td>
  90.                 <td>Canon 90D單反</td>
  91.                 <td>臺</td>
  92.                 <td class="price">9699</td>
  93.                 <td><input type="number" min="1" value="1" /></td>
  94.                 <td class="amount">xxxx</td>
  95.             </tr>
  96.         </tbody>
  97.         <tfoot>
  98.             <tr style="font-weight: bolder; font-size: 1.2em">
  99.                 <td colspan="5">總計:</td>
  100.                 <td id="sum">xxxx</td>
  101.                 <td id="total-amount">xxxx</td>
  102.             </tr>
  103.         </tfoot>
  104.     </table>
  105.     <div style="width: 90%; margin: 10px auto">
  106.         <button style="float: right; width: 100px">結(jié)算</button>
  107.     </div>
  108.     <script>
  109.         // 1.全選復(fù)選框
  110.         const checkAll = $("#check-all");
  111.         // 2.獨立復(fù)選框
  112.         const checkItems = $("input[name='item']");
  114.         // 改變?nèi)x，獨立復(fù)選框也改變
  115.         checkAll.change(ev => checkItems.each(function () {
  116.             $(this).prop("checked", $(ev.target).is(":checked"));
  117.         }))
  119.         // 改變獨立復(fù)選框，改變?nèi)x
  120.         checkItems.change(() => checkAll.prop("checked", [...checkItems].every(item => item.checked)));
  121.     </script>
  122. </body>
  124. </html>

2.勾選/不勾選商品時購物車自動完成計算

  • 勾選

  • 不勾選

  1. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>購物車勾選不勾選時自動完成計算</title>
  7.     <link rel="stylesheet" href="style.css" />
  8. </head>
  10. <body>
  11.     <table>
  12.         <caption>
  13.             購物車
  14.         </caption>
  15.         <thead>
  16.             <tr>
  17.                 <!-- 全選復(fù)選框 -->
  18.                 <th><input type="checkbox" name="checkAll" id="check-all" checked /><label for="check-all">全選</label>
  19.                 </th>
  20.                 <th>圖片</th>
  21.                 <th>品名</th>
  22.                 <th>單位</th>
  23.                 <th>單價/元</th>
  24.                 <th>數(shù)量</th>
  25.                 <th>金額/元</th>
  26.             </tr>
  27.         </thead>
  28.         <tbody>
  29.             <tr>
  30.                 <td>
  31.                     <input type="checkbox" name="item" value="SN-1020" checked />
  32.                 </td>
  33.                 <td>
  34.                     <a href=""><img src="images/p1.jpg" alt="" /></a>
  35.                 </td>
  36.                 <td>iPhone 11</td>
  37.                 <td>臺</td>
  38.                 <td class="price">4799</td>
  39.                 <td><input type="number" min="1" value="1" /></td>
  40.                 <td class="amount">xxxx</td>
  41.             </tr>
  42.             <tr>
  43.                 <td>
  44.                     <input type="checkbox" name="item" value="SN-1020" checked />
  45.                 </td>
  46.                 <td>
  47.                     <a href=""><img src="images/p2.jpg" alt="" /></a>
  48.                 </td>
  49.                 <td>小米pro 11</td>
  50.                 <td>部</td>
  51.                 <td class="price">3999</td>
  52.                 <td><input type="number" min="1" value="2" /></td>
  53.                 <td class="amount">xxxx</td>
  54.             </tr>
  55.             <tr>
  56.                 <td>
  57.                     <input type="checkbox" name="item" value="SN-1030" checked />
  58.                 </td>
  59.                 <td>
  60.                     <a href=""><img src="images/p3.jpg" alt="" /></a>
  61.                 </td>
  62.                 <td>MacBook Pro</td>
  63.                 <td>臺</td>
  64.                 <td class="price">18999</td>
  65.                 <td><input type="number" min="1" value="1" /></td>
  66.                 <td class="amount">xxxx</td>
  67.             </tr>
  68.             <tr>
  69.                 <td>
  70.                     <input type="checkbox" name="item" value="SN-1040" checked />
  71.                 </td>
  72.                 <td>
  73.                     <a href=""><img src="images/p4.jpg" alt="" /></a>
  74.                 </td>
  75.                 <td>小米75電視</td>
  76.                 <td>臺</td>
  77.                 <td class="price">5999</td>
  78.                 <td><input type="number" min="1" value="2" /></td>
  79.                 <td class="amount">xxxx</td>
  80.             </tr>
  81.             <tr>
  82.                 <td>
  83.                     <input type="checkbox" name="item" value="SN-1050" checked />
  84.                 </td>
  85.                 <td>
  86.                     <a href=""><img src="images/p5.jpg" alt="" /></a>
  87.                 </td>
  88.                 <td>Canon 90D單反</td>
  89.                 <td>臺</td>
  90.                 <td class="price">9699</td>
  91.                 <td><input type="number" min="1" value="1" /></td>
  92.                 <td class="amount">xxxx</td>
  93.             </tr>
  94.         </tbody>
  95.         <tfoot>
  96.             <tr style="font-weight: bolder; font-size: 1.2em">
  97.                 <td colspan="5">總計:</td>
  98.                 <td id="sum">xxxx</td>
  99.                 <td id="total-amount">xxxx</td>
  100.             </tr>
  101.         </tfoot>
  102.     </table>
  103.     <div style="width: 90%; margin: 10px auto">
  104.         <button style="float: right; width: 100px">結(jié)算</button>
  105.     </div>
  106.     <script>
  107.         // 全選復(fù)選框
  108.         const checkAll = document.getElementById("check-all");
  109.         const checkItems = document.getElementsByName("item");
  111.         // 改變?nèi)x，獨立復(fù)選框也改變
  112.         checkAll.onchange = ev => checkItems.forEach(item => item.checked = ev.target.checked);
  113.         // 改變獨立復(fù)選框，改變?nèi)x
  114.         checkItems.forEach(item => item.onchange = () => checkAll.checked = [...checkItems].every(ele => ele.checked));
  116.         // 購物車，自動計算
  117.         function cart() {
  118.             // 獨立單價組
  119.             let priceArr = [...document.getElementsByClassName("price")].map(p => p.textContent * 1);
  120.             // 獨立數(shù)量數(shù)組
  121.             let numbersArr = [...document.querySelectorAll("input[type='number']")].map(n => n.value * 1);
  122.             // 獨立金額數(shù)組
  123.             let aumoutsArr = [priceArr, numbersArr].reduce((total, curr) => total.map((item, i) => item * curr[i]));
  125.             // 獨立金額數(shù)據(jù)填充，由單品數(shù)量改變時觸發(fā)，與獨立復(fù)選框狀態(tài)無關(guān)
  126.             document.querySelectorAll(".amount").forEach((ele, i) => (ele.textContent = aumoutsArr[i]));
  128.             // 獲取所有獨立復(fù)選框元素
  129.             let items = document.getElementsByName("item");
  130.             // 過濾出所有獨立復(fù)選框選中狀態(tài)的數(shù)量數(shù)組
  131.             numbersArr = numbersArr.filter((ele, i) => [...items][i].checked);
  132.             // 過濾出所有獨立復(fù)選框選中狀態(tài)的金額數(shù)組
  133.             aumoutsArr = aumoutsArr.filter((ele, i) => [...items][i].checked);
  135.             // 計算總數(shù)量和總金額
  136.             let sum = numbersArr.reduce((pre, cur) => pre + cur, 0);
  137.             let total = aumoutsArr.reduce((pre, cur) => pre + cur, 0);
  139.             // 填充總數(shù)量和總金額到頁面中
  140.             document.getElementById("sum").textContent = sum;
  141.             document.getElementById("total-amount").textContent = total;
  143.         }
  144.         // 改變單品數(shù)量時觸發(fā)
  145.         document.querySelectorAll("input[type='number']").forEach(ele => ele.onchange = cart);
  146.         // 改變獨立復(fù)選框狀態(tài)時觸發(fā)
  147.         document.getElementsByName("item").forEach(item => item.onchange = cart);
  148.         // 全選狀態(tài)改變時觸發(fā)
  149.         document.getElementById("check-all").addEventListener("change", cart);
  150.         // 頁面載入完成時加載
  151.         window.onload = cart;
  152.     </script>
  153. </body>
  155. </html>
批改老師：天蓬老師天蓬老師

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

老師批語：
本博文版權(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+教程免費學(xué)