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日程管理控件glDatePicker用法详解
Mar 29 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
jquery检测上传文件大小示例
Apr 26 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
jquery实现简单每周轮换的日历
Sep 10 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数组函数array_key_exists()小结
2015/12/10 PHP
微信支付开发订单查询实例
2016/07/12 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
基于jquery的模态div层弹出效果
2010/08/21 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
Vue.js进阶知识点总结
2018/04/01 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
Python实现把xml或xsl转换为html格式
2015/04/08 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
python向图片里添加文字
2019/11/26 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
python中如何设置代码自动提示
2020/07/15 Python
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
越南综合购物网站:Lazada越南
2019/06/10 全球购物
税务干部鉴定材料
2014/02/11 职场文书
银行奉献演讲稿
2014/09/16 职场文书
会议主持词通用版
2019/04/02 职场文书