Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 购物车全选功能
Blogger Information
Blog 35
fans 0
comment 0
visits 16736
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
购物车全选功能
手机用户311660634
Original
430 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>购物车</title>
  8.     <style>
  9.       .cart {
  10.         width: 460px;
  11.         display: grid;
  12.         gap: 10px;
  13.       }
  14.       table {
  15.         border-collapse: collapse;
  16.         text-align: center;
  17.       }
  18.       table caption {
  19.         font-size: 20px;
  20.         margin-bottom: 10px;
  21.       }
  22.       table input[type='number'] {
  23.         width: 40px;
  24.       }
  25.       table th,
  26.       table td {
  27.         border-bottom: thin solid #888;
  28.         padding: 5px;
  29.       }
  30.       table thead {
  31.         border-top: thin solid #888;
  32.         background-color: lightcyan;
  33.       }
  34.       table tfoot {
  35.         background-color: lightcyan;
  36.       }
  37.       table tbody tr:nth-child(odd):hover {
  38.         background-color: #eee;
  39.         cursor: pointer;
  40.       }
  42.       table tr td:first-child {
  43.         padding-left: 20px;
  44.       }
  45.       table tr td:last-child {
  46.         padding-right: 20px;
  47.       }
  48.       .cart .pay {
  49.         display: grid;
  50.         grid: 1fr / auto-flow;
  51.         place-content: end;
  52.         gap: 10px;
  53.       }
  54.     </style>
  55.   </head>
  56.   <body>
  57.     <div class="cart">
  58.       <table>
  59.         <caption>
  60.           我的购物车
  61.         </caption>
  63.         <thead>
  64.           <tr>
  65.             <!-- 全选按钮 -->
  66.             <td><input type="checkbox" name="" class="checkall" checked /></td>
  67.             <td>编号</td>
  68.             <td>品名</td>
  69.             <td>单位</td>
  70.             <td>单价</td>
  71.             <td>数量</td>
  72.             <td>金额(元)</td>
  73.           </tr>
  74.         </thead>
  75.       </table>
  76.     </div>
  78.     <script type="module">
  79.       // (一) 商品信息
  80.       const items = [
  81.         { id: 286, name: '酸奶', units: '箱', price: 50, num: 1 },
  82.         { id: 870, name: '苹果', units: '千克', price: 10, num: 1 },
  83.         { id: 633, name: '外套', units: '件', price: 300, num: 1 },
  84.         { id: 153, name: '皮鞋', units: '双', price: 400, num: 1 },
  85.         { id: 109, name: '手机', units: '台', price: 5000, num: 1 },
  86.       ];
  88.       // (二) 导入购物车模块
  89.       import Cart from './modules/cart.js';
  91.       // (三) 实例化购物车类
  92.       const cart = new Cart(items);
  94.       //   console.log(cart.total);
  95.       //   console.log(cart.money);
  96.       //   console.log(cart.totalMoney);
  98.       // (四) 获取购物车(表格)
  99.       const table = document.querySelector('table');
  101.       // (五) 将商品渲染到购物车元素中 tbody
  102.       // 1 创建 tbody: 商品容器
  103.       const tbody = table.createTBody();
  104.       // 2. 创建tbody的内容,商品列表
  105.       items.forEach(function (item, key) {
  106.         // 1. 创建商品模板字符串
  107.         const tr = `
  108.             <tr>
  109.                 <td><input type="checkbox" name="" class="check" checked /></td>
  110.                 <td>${item.id}</td>
  111.                 <td>${item.name}</td>
  112.                 <td>${item.units}</td>
  113.                 <td>${item.price}</td>
  114.                 <td>
  115.                     <input type="number" name="" value="${item.num}"
  116.                 </td>
  117.                 <td class="money">${cart.money[key]}</td>
  118.             </tr>
  119.         `;
  120.         // 2. 将内容填充到tbody
  121.         tbody.insertAdjacentHTML('beforeend', tr);
  122.         // tbody.innerHTML = tr;
  123.       });
  125.       // (六) 将相关统计数据(总数量,总金额),填充到tfoot中
  126.       const tfoot = table.createTFoot();
  127.       // 创建tfoot内容
  128.       let tr = `
  129.         <tr>
  130.             <td colspan="5">总计:</td>
  131.             <td class="total">${cart.total}</td>
  132.             <td class="total-money">${cart.totalMoney}</td>
  133.         </tr>
  134.       `;
  135.       tfoot.insertAdjacentHTML('beforeend', tr);
  137.       // (七) 更新数量,实时计算出结果并显示出来
  138.       // 1. 拿到所有的数量控件
  139.       const nums = table.querySelectorAll('input[type=number]');
  140.       // 2. 为每一个数量控件添加事件监听: input
  141.       nums.forEach(function (num, key) {
  142.         num.oninput = function () {
  143.           // 1. 计算总数量
  144.           items[key].num = num.value * 1;
  145.           cart.total = cart.getTotal(items);
  147.           // 2. 计算每个商品金额
  148.           cart.money[key] = num.value * 1 * items[key].price;
  150.           // 3. 计算商品总金额
  151.           cart.totalMoney = cart.money.reduce(function (acc, cur) {
  152.             return acc + cur;
  153.           });
  155.           //   4. 将数据渲染到指定元素上
  156.           table.querySelector('.total').textContent = cart.total;
  157.           table.querySelectorAll('.money')[key].textContent = cart.money[key];
  158.           table.querySelector('.total-money').textContent = cart.totalMoney;
  159.         };
  160.       });
  161. //全选全不选功能
  162.     //   选择标签
  163.     let checkall = document.querySelector('.checkall')
  164.     // console.log(checkall)
  165.     let check = document.querySelectorAll('.check')
  166.     // console.log(check)
  167.     // 绑定事件
  168.     checkall.onclick = function(){
  170.         for(let i = 0; i < check.length; i++){
  171.             check[i].checked = checkall.checked
  172.         }
  173.     }
  175.     for(let i = 0; i < check.length; i++){
  176.         check[i].onclick = function(){
  177.         //只要有个选择框没有被选中，则全选框取消checked
  178.             for(let j = 0; j < check.length; j++){
  179.                 if(check[j].checked == false){
  180.                     checkall.checked = false;
  181.                     return;
  182.                 }else {
  183.                     checkall.checked == true;
  184.                 }
  186.             }
  188.         }
  189.     }
  194.     </script>
  195.   </body>
  196. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post