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插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
jQuery实现回到顶部效果
Oct 19 jQuery
jquery插件实现图片悬浮
Apr 16 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/02/27 PHP
php gzip压缩输出的实现方法
2013/04/27 PHP
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
php读取mysql的简单实例
2014/01/15 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
JavaScript 动态创建VML的方法
2009/10/14 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
python和shell变量互相传递的几种方法
2013/11/20 Python
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
python实现ip代理池功能示例
2019/07/05 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
新浪网技术部笔试题
2016/08/26 面试题
介绍一下#error预处理
2015/09/25 面试题
部队学习十八大感言
2014/01/11 职场文书
土建专业大学生自荐信范文
2014/04/09 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
Nest.js参数校验和自定义返回数据格式详解
2021/03/29 Javascript
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis
SQL写法--行行比较
2021/08/23 SQL Server
Java的Object类的九种方法
2022/04/13 Java/Android