jQuery实现购物车全功能


Posted in jQuery onJanuary 11, 2021

本文实例为大家分享了jQuery实现购物车全功能的具体代码,供大家参考,具体内容如下

效果图:

jQuery实现购物车全功能

HTML&&CSS:

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <script src="../jquery-3.4.1.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  
  .tab {
   width: 500px;
   border-collapse: collapse;
   margin: 0 auto;
  }
  
  .tab td,
  th {
   border: 1px solid #000;
  }
  
  .tab .num {
   width: 20px;
  }
  
  .tab .add,
  .sub {
   width: 20px;
  }
  
  .current {
   background-color: pink;
  }
 </style>
</head>

<body>
 <table class="tab">
  <thead>
   <th>全选 <input type="checkbox" name="" value="" class="checkAll">
    <input type="checkbox" name="" value="" class="checkAll">
   </th>
   <th>商品名称</th>
   <th>单价</th>
   <th>数量</th>
   <th>小计</th>
   <th>操作</th>
  </thead>
  <tbody>
   <tr>
    <td><input type="checkbox" class="ed" /></td>
    <td>电脑</td>
    <td class="price">¥200.20</td>
    <td>
     <button type="button" class="sub">-</button>
     <input type="text" name="" value="1" class="num">
     <button type="button" class="add">+</button>
    </td>
    <td class="small_total">¥200.20</td>
    <td class="delete">删除</td>
   </tr>
   <tr>
    <td><input type="checkbox" class="ed" /></td>
    <td>手机</td>
    <td class="price">¥100.30</td>
    <td>
     <button type="button" class="sub">-</button>
     <input type="text" name="" value="1" class="num">
     <button type="button" class="add">+</button>
    </td>
    <td class="small_total">¥100.30</td>
    <td class="delete">删除</td>
   </tr>
   <tr>
    <td><input type="checkbox" class="ed" /></td>
    <td>空调</td>
    <td class="price">¥1000.99</td>
    <td>
     <button type="button" class="sub">-</button>
     <input type="text" name="" value="1" class="num">
     <button type="button" class="add">+</button>
    </td>
    <td class="small_total">¥1000.99</td>
    <td class="delete">删除</td>
   </tr>
  </tbody>
 </table>
 <div>
  <span>已选<span style="color: red;" class="num_sum">1</span>件商品</span>
  <span>总计:</span>
  <span class="sum" style="color: red;">0</span>
  <div><span style="color: red;" class="delSome">删除选中商品</span>
   <span style="color: red;" class="delAll">清空购物车</span>
  </div>
 </div>
 </body>

</html>

JS:

//里面三个小的复选按钮选中状态跟着 全选按钮走
//因为checked是复选框的固有属性,此时利用prop()获取和设置该属性
$(function() {
   getSum();
   $(".checkAll").change(function() {
     // console.log($(this).prop("checked"));//全选按钮的状态
     $(".ed,.checkAll").prop("checked", $(this).prop("checked"));
     getSum();
     if ($(".ed,.checkAll").prop("checked")) {
      //如果全选,让所有商品添加类名(背景颜色)
      $(".tab tbody").children().addClass("current");
     } else {
      $(".tab tbody").children().removeClass("current");
     }
    })
    //如果所有小按钮的个数都被选了,全选按钮就选上,如果小按钮没有被选上,则全选按钮就不选上
    //:checked选择器,查找本选中的表单元素
   $(".ed").change(function() {
    // console.log($(".ed:checked").length);//小复选框选中的个数
    // console.log($(".ed").length);
    //console.log($(this).prop("checked"));
    if ($(".ed:checked").length === $(".ed").length) {
     $(".checkAll").prop("checked", true);
    } else {
     $(".checkAll").prop("checked", false);
    }
    getSum();
    if ($(this).prop("checked")) {
     $(this).parents("tr").addClass("current");
    } else {
     $(this).parents("tr").removeClass("current");
    }
   })

   $(".add").click(function() {
    let n = parseInt($(this).siblings(".num").val());
    //console.log(n);
    n++;
    $(this).siblings(".num").val(n);
    let price = $(this).parent().siblings(".price").html();
    price = price.substr(1);
    //console.log(price);
    $(this).parent().siblings(".small_total").text("¥" + (n * price).toFixed(2));
    getSum();
   })
   $(".sub").click(function() {
     let n = parseInt($(this).siblings(".num").val());
     //console.log(n);
     if (n === 1) {
      return false;
     }
     n--;
     $(this).siblings(".num").val(n);
     let price = $(this).parent().siblings(".price").html();
     price = price.substr(1);
     //console.log(price);
     $(this).parent().siblings(".small_total").text("¥" + (n * price).toFixed(2));
     getSum();
    })
    //用户也可以直接修改表单num里面的值(小bug),同样计算小计
   $(".num").change(function() {
    let n = $(this).val();
    let price = $(this).parent().siblings(".price").html();
    price = price.substr(1);
    $(this).parent().siblings(".small_total").text("¥" + (n * price).toFixed(2));
    getSum();
   })

   function getSum() {
    let count = 0; //计算总件数
    let money = 0; //计算总价钱
    $(".num").each(function(index) {
     if ($(".ed").eq(index).prop("checked") == true) {
      count += parseInt($(".num").eq(index).val());
      money += parseFloat($(".small_total").eq(index).text().substr(1));
     }
    })
    $(".num_sum").html(count);
    $(".sum").html(money.toFixed(2));
   }

   //删除商品模块
   //点击删除之后一定是删除当前的商品,所以从$(this)出发
   $(".delete").click(function() {
     //删除的是当前的商品
     $(this).parent().remove();
     $(".ed").change();
     getSum();
     clearCheckAll();
    })
    //删除选定的商品:小的复选框如果选中就删除对应的商品
   $(".delSome").click(function() {
     //删除的是选中的商品
     $(".ed:checked").parent().parent().remove();
     getSum();
     clearCheckAll();
    })
    //清空购物车
   $(".delAll").click(function() {
    $(".tab tbody").empty();
    getSum();
    clearCheckAll();
   })

   function clearCheckAll() {
    if ($(".tab tbody")[0].innerText == '') {
     $(".checkAll").prop("checked", false);
    }
   }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
jQuery层叠选择器用法实例分析
Jun 28 jQuery
jQuery实现手风琴特效
Jan 11 #jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 #jQuery
使用jquery实现轮播图效果
Jan 02 #jQuery
jQuery实现全选按钮
Jan 01 #jQuery
jquery自定义组件实例详解
Dec 31 #jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 #jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 #jQuery
You might like
php生成短网址示例
2014/05/05 PHP
php对象和数组相互转换的方法
2015/05/12 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
javascript for循环设法提高性能
2010/02/24 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
js字符串的各种格式的转换 ToString,Format
2011/08/08 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
2013/04/21 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
2017/08/16 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
Python构造函数及解构函数介绍
2015/02/26 Python
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
python 标准差计算的实现(std)
2019/07/29 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
小学生读书感言
2014/02/12 职场文书
红色故事演讲稿
2014/05/22 职场文书
导游欢送词
2015/01/31 职场文书
2015年入党决心书
2015/02/05 职场文书
大学生受助感言
2015/08/01 职场文书
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis
MySQL 开窗函数
2022/02/15 MySQL