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.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
jQuery带控制按钮轮播图插件
Jul 31 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
一个域名查询的程序
2006/10/09 PHP
php多文件上传实现代码
2014/02/20 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
javaScript同意等待代码实现心得
2011/01/01 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
Python使用gensim计算文档相似性
2016/04/10 Python
pandas数值计算与排序方法
2018/04/12 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
详解如何通过H5(浏览器/WebView/其他)唤起本地app
2017/12/11 HTML / CSS
营销与策划专业毕业生求职信
2013/11/01 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
二年级学生期末评语
2014/12/26 职场文书
接收函格式
2015/01/30 职场文书
前台接待员岗位职责
2015/04/15 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
我去timi了,一起去timi是什么意思?
2022/04/13 杂记