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简单绑定单个事件的方法示例
Jun 10 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jQuery常用选择器详解
Jul 17 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
详解jQuery的核心函数和事件处理
Feb 18 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变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
深入探究使JavaScript动画流畅的一些方法
2015/06/30 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
js返回顶部实例分享
2016/12/21 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
koa-router源码学习小结
2018/09/07 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
python3将视频流保存为本地视频文件
2018/06/20 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
详解python实现交叉验证法与留出法
2019/07/11 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
Ajxa常见问题都有哪些
2014/03/26 面试题
就业推荐表自我鉴定
2013/10/29 职场文书
采购员岗位职责
2013/11/15 职场文书
医院护士工作检讨书
2014/10/26 职场文书
语文教师个人工作总结
2015/02/06 职场文书
《全神贯注》教学反思
2016/02/22 职场文书
教育教学工作反思
2016/02/24 职场文书
MongoDB支持的数据类型
2022/04/11 MongoDB