• 售前

  • 售后

热门帖子
入门百科

jQuery实现购物车全功能

[复制链接]
街充骨万怎 显示全部楼层 发表于 2021-10-25 19:05:04 |阅读模式 打印 上一主题 下一主题
本文实例为大家分享了jQuery实现购物车全功能的具体代码,供大家参考,具体内容如下
结果图:

HTML&&CSS:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <script src="../jquery-3.4.1.min.js"></script>
  8. <style>
  9.   * {
  10.    margin: 0;
  11.    padding: 0;
  12.   }
  13.   
  14.   .tab {
  15.    width: 500px;
  16.    border-collapse: collapse;
  17.    margin: 0 auto;
  18.   }
  19.   
  20.   .tab td,
  21.   th {
  22.    border: 1px solid #000;
  23.   }
  24.   
  25.   .tab .num {
  26.    width: 20px;
  27.   }
  28.   
  29.   .tab .add,
  30.   .sub {
  31.    width: 20px;
  32.   }
  33.   
  34.   .current {
  35.    background-color: pink;
  36.   }
  37. </style>
  38. </head>
  39. <body>
  40. <table class="tab">
  41.   <thead>
  42.    <th>全选 <input type="checkbox" name="" value="" class="checkAll">
  43.     <input type="checkbox" name="" value="" class="checkAll">
  44.    </th>
  45.    <th>商品名称</th>
  46.    <th>单价</th>
  47.    <th>数量</th>
  48.    <th>小计</th>
  49.    <th>操作</th>
  50.   </thead>
  51.   <tbody>
  52.    <tr>
  53.     <td><input type="checkbox" class="ed" /></td>
  54.     <td>电脑</td>
  55.     <td class="price">¥200.20</td>
  56.     <td>
  57.      <button type="button" class="sub">-</button>
  58.      <input type="text" name="" value="1" class="num">
  59.      <button type="button" class="add">+</button>
  60.     </td>
  61.     <td class="small_total">¥200.20</td>
  62.     <td class="delete">删除</td>
  63.    </tr>
  64.    <tr>
  65.     <td><input type="checkbox" class="ed" /></td>
  66.     <td>手机</td>
  67.     <td class="price">¥100.30</td>
  68.     <td>
  69.      <button type="button" class="sub">-</button>
  70.      <input type="text" name="" value="1" class="num">
  71.      <button type="button" class="add">+</button>
  72.     </td>
  73.     <td class="small_total">¥100.30</td>
  74.     <td class="delete">删除</td>
  75.    </tr>
  76.    <tr>
  77.     <td><input type="checkbox" class="ed" /></td>
  78.     <td>空调</td>
  79.     <td class="price">¥1000.99</td>
  80.     <td>
  81.      <button type="button" class="sub">-</button>
  82.      <input type="text" name="" value="1" class="num">
  83.      <button type="button" class="add">+</button>
  84.     </td>
  85.     <td class="small_total">¥1000.99</td>
  86.     <td class="delete">删除</td>
  87.    </tr>
  88.   </tbody>
  89. </table>
  90. <div>
  91.   <span>已选<span style="color: red;" class="num_sum">1</span>件商品</span>
  92.   <span>总计:</span>
  93.   <span class="sum" style="color: red;">0</span>
  94.   <div><span style="color: red;" class="delSome">删除选中商品</span>
  95.    <span style="color: red;" class="delAll">清空购物车</span>
  96.   </div>
  97. </div>
  98. </body>
  99. </html>
复制代码
JS:
  1. //里面三个小的复选按钮选中状态跟着 全选按钮走
  2. //因为checked是复选框的固有属性,此时利用prop()获取和设置该属性
  3. $(function() {
  4.    getSum();
  5.    $(".checkAll").change(function() {
  6.      // console.log($(this).prop("checked"));//全选按钮的状态
  7.      $(".ed,.checkAll").prop("checked", $(this).prop("checked"));
  8.      getSum();
  9.      if ($(".ed,.checkAll").prop("checked")) {
  10.       //如果全选,让所有商品添加类名(背景颜色)
  11.       $(".tab tbody").children().addClass("current");
  12.      } else {
  13.       $(".tab tbody").children().removeClass("current");
  14.      }
  15.     })
  16.     //如果所有小按钮的个数都被选了,全选按钮就选上,如果小按钮没有被选上,则全选按钮就不选上
  17.     //:checked选择器,查找本选中的表单元素
  18.    $(".ed").change(function() {
  19.     // console.log($(".ed:checked").length);//小复选框选中的个数
  20.     // console.log($(".ed").length);
  21.     //console.log($(this).prop("checked"));
  22.     if ($(".ed:checked").length === $(".ed").length) {
  23.      $(".checkAll").prop("checked", true);
  24.     } else {
  25.      $(".checkAll").prop("checked", false);
  26.     }
  27.     getSum();
  28.     if ($(this).prop("checked")) {
  29.      $(this).parents("tr").addClass("current");
  30.     } else {
  31.      $(this).parents("tr").removeClass("current");
  32.     }
  33.    })
  34.    $(".add").click(function() {
  35.     let n = parseInt($(this).siblings(".num").val());
  36.     //console.log(n);
  37.     n++;
  38.     $(this).siblings(".num").val(n);
  39.     let price = $(this).parent().siblings(".price").html();
  40.     price = price.substr(1);
  41.     //console.log(price);
  42.     $(this).parent().siblings(".small_total").text("¥" + (n * price).toFixed(2));
  43.     getSum();
  44.    })
  45.    $(".sub").click(function() {
  46.      let n = parseInt($(this).siblings(".num").val());
  47.      //console.log(n);
  48.      if (n === 1) {
  49.       return false;
  50.      }
  51.      n--;
  52.      $(this).siblings(".num").val(n);
  53.      let price = $(this).parent().siblings(".price").html();
  54.      price = price.substr(1);
  55.      //console.log(price);
  56.      $(this).parent().siblings(".small_total").text("¥" + (n * price).toFixed(2));
  57.      getSum();
  58.     })
  59.     //用户也可以直接修改表单num里面的值(小bug),同样计算小计
  60.    $(".num").change(function() {
  61.     let n = $(this).val();
  62.     let price = $(this).parent().siblings(".price").html();
  63.     price = price.substr(1);
  64.     $(this).parent().siblings(".small_total").text("¥" + (n * price).toFixed(2));
  65.     getSum();
  66.    })
  67.    function getSum() {
  68.     let count = 0; //计算总件数
  69.     let money = 0; //计算总价钱
  70.     $(".num").each(function(index) {
  71.      if ($(".ed").eq(index).prop("checked") == true) {
  72.       count += parseInt($(".num").eq(index).val());
  73.       money += parseFloat($(".small_total").eq(index).text().substr(1));
  74.      }
  75.     })
  76.     $(".num_sum").html(count);
  77.     $(".sum").html(money.toFixed(2));
  78.    }
  79.    //删除商品模块
  80.    //点击删除之后一定是删除当前的商品,所以从$(this)出发
  81.    $(".delete").click(function() {
  82.      //删除的是当前的商品
  83.      $(this).parent().remove();
  84.      $(".ed").change();
  85.      getSum();
  86.      clearCheckAll();
  87.     })
  88.     //删除选定的商品:小的复选框如果选中就删除对应的商品
  89.    $(".delSome").click(function() {
  90.      //删除的是选中的商品
  91.      $(".ed:checked").parent().parent().remove();
  92.      getSum();
  93.      clearCheckAll();
  94.     })
  95.     //清空购物车
  96.    $(".delAll").click(function() {
  97.     $(".tab tbody").empty();
  98.     getSum();
  99.     clearCheckAll();
  100.    })
  101.    function clearCheckAll() {
  102.     if ($(".tab tbody")[0].innerText == '') {
  103.      $(".checkAll").prop("checked", false);
  104.     }
  105.    }
  106. })
复制代码
以上就是本文的全部内容,盼望对大家的学习有所资助,也盼望大家多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作