购物车全选功能

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车</title>
    <style>
      .cart {
        width: 460px;
        display: grid;
        gap: 10px;
      }
      table {
        border-collapse: collapse;
        text-align: center;
      }
      table caption {
        font-size: 20px;
        margin-bottom: 10px;
      }
      table input[type='number'] {
        width: 40px;
      }
      table th,
      table td {
        border-bottom: thin solid #888;
        padding: 5px;
      }
      table thead {
        border-top: thin solid #888;
        background-color: lightcyan;
      }
      table tfoot {
        background-color: lightcyan;
      }
      table tbody tr:nth-child(odd):hover {
        background-color: #eee;
        cursor: pointer;
      }
      table tr td:first-child {
        padding-left: 20px;
      }
      table tr td:last-child {
        padding-right: 20px;
      }
      .cart .pay {
        display: grid;
        grid: 1fr / auto-flow;
        place-content: end;
        gap: 10px;
      }
    </style>
  </head>
  <body>
    <div class="cart">
      <table>
        <caption>
          我的购物车
        </caption>
        <thead>
          <tr>
            <!-- 全选按钮 -->
            <td><input type="checkbox" name="" class="checkall" checked /></td>
            <td>编号</td>
            <td>品名</td>
            <td>单位</td>
            <td>单价</td>
            <td>数量</td>
            <td>金额(元)</td>
          </tr>
        </thead>
      </table>
    </div>
    <script type="module">
      // (一) 商品信息
      const items = [
        { id: 286, name: '酸奶', units: '箱', price: 50, num: 1 },
        { id: 870, name: '苹果', units: '千克', price: 10, num: 1 },
        { id: 633, name: '外套', units: '件', price: 300, num: 1 },
        { id: 153, name: '皮鞋', units: '双', price: 400, num: 1 },
        { id: 109, name: '手机', units: '台', price: 5000, num: 1 },
      ];
      // (二) 导入购物车模块
      import Cart from './modules/cart.js';
      // (三) 实例化购物车类
      const cart = new Cart(items);
      //   console.log(cart.total);
      //   console.log(cart.money);
      //   console.log(cart.totalMoney);
      // (四) 获取购物车(表格)
      const table = document.querySelector('table');
      // (五) 将商品渲染到购物车元素中 tbody
      // 1 创建 tbody: 商品容器
      const tbody = table.createTBody();
      // 2. 创建tbody的内容,商品列表
      items.forEach(function (item, key) {
        // 1. 创建商品模板字符串
        const tr = `
            <tr>
                <td><input type="checkbox" name="" class="check" checked /></td>
                <td>${item.id}</td>
                <td>${item.name}</td>
                <td>${item.units}</td>
                <td>${item.price}</td>
                <td>
                    <input type="number" name="" value="${item.num}"
                </td>
                <td class="money">${cart.money[key]}</td>
            </tr>
        `;
        // 2. 将内容填充到tbody
        tbody.insertAdjacentHTML('beforeend', tr);
        // tbody.innerHTML = tr;
      });
      // (六) 将相关统计数据(总数量,总金额),填充到tfoot中
      const tfoot = table.createTFoot();
      // 创建tfoot内容
      let tr = `
        <tr>
            <td colspan="5">总计:</td>
            <td class="total">${cart.total}</td>
            <td class="total-money">${cart.totalMoney}</td>
        </tr>
      `;
      tfoot.insertAdjacentHTML('beforeend', tr);
      // (七) 更新数量,实时计算出结果并显示出来
      // 1. 拿到所有的数量控件
      const nums = table.querySelectorAll('input[type=number]');
      // 2. 为每一个数量控件添加事件监听: input
      nums.forEach(function (num, key) {
        num.oninput = function () {
          // 1. 计算总数量
          items[key].num = num.value * 1;
          cart.total = cart.getTotal(items);
          // 2. 计算每个商品金额
          cart.money[key] = num.value * 1 * items[key].price;
          // 3. 计算商品总金额
          cart.totalMoney = cart.money.reduce(function (acc, cur) {
            return acc + cur;
          });
          //   4. 将数据渲染到指定元素上
          table.querySelector('.total').textContent = cart.total;
          table.querySelectorAll('.money')[key].textContent = cart.money[key];
          table.querySelector('.total-money').textContent = cart.totalMoney;
        };
      });
//全选全不选功能
    //   选择标签
    let checkall = document.querySelector('.checkall')
    // console.log(checkall)
    let check = document.querySelectorAll('.check')
    // console.log(check)
    // 绑定事件
    checkall.onclick = function(){
        for(let i = 0; i < check.length; i++){
            check[i].checked = checkall.checked
        }
    }
    for(let i = 0; i < check.length; i++){
        check[i].onclick = function(){
        //只要有个选择框没有被选中，则全选框取消checked
            for(let j = 0; j < check.length; j++){
                if(check[j].checked == false){
                    checkall.checked = false;
                    return;
                }else {
                    checkall.checked == true;
                }
            }
        }
    }
    </script>
  </body>
</html>
相关文章
