css

  1. *{font-style: normal}
  2. .gw{margin: 8px;}
  3. .gw::after{display: block;clear: both;content: '';margin: 10px;}
  4. .gw_num{border: 1px solid #dbdbdb;width: 110px;line-height: 26px;overflow: hidden;float: left;}
  5. .gw_num em{display: block;height: 26px;width: 26px;float: left;color: #7A7979;border-right: 1px solid #dbdbdb;text-align: center;cursor: pointer;font-style: normal}
  6. .gw_num .num{display: block;float: left;text-align: center;width: 52px;font-style: normal;font-size: 14px;line-height: 24px;border: 0;}
  7. .gw_num em.add{float: right;border-right: 0;border-left: 1px solid #dbdbdb;}
  8. p{margin: 4px;padding: 0}
  9. .choose,.qx{float: left;width: 20px;height: 20px;border: 1px solid #ccc; border-radius: 100%;margin-right: 10px;}
  10. .choose-on, .qx-on{background: url(./on.png) no-repeat center center;background-size: 100%;}
  1. <div class="zong">
  2. <div class="gw">
  3. <div class="choose"></div>
  4. <div class="gw_num">
  5. <em class="jian">-</em>
  6. <input type="text" value="0" class="num"/>
  7. <em class="add">+</em>
  8. </div>
  9. <p>单价<i>20</i>元 总金额:¥<span>0</span></p>
  10. <div class="del">删除</div>
  11. </div>
  12. <div class="gw">
  13. <div class="choose"></div>
  14. <div class="gw_num">
  15. <em class="jian">-</em>
  16. <input type="text" value="0" class="num"/>
  17. <em class="add">+</em>
  18. </div>
  19. <p>单价<i>40</i>元 总金额:¥<span>0</span></p>
  20. <div class="del">删除</div>
  21. </div>
  22. <div class="gw">
  23. <div class="choose"></div>
  24. <div class="gw_num">
  25. <em class="jian">-</em>
  26. <input type="text" value="0" class="num"/>
  27. <em class="add">+</em>
  28. </div>
  29. <p>单价<i>40</i>元 总金额:¥<span>0</span></p>
  30. <div class="del">删除</div>
  31. </div>
  32. <div class="gw">
  33. <div class="choose"></div>
  34. <div class="gw_num">
  35. <em class="jian">-</em>
  36. <input type="text" value="0" class="num"/>
  37. <em class="add">+</em>
  38. </div>
  39. <p>单价<i>40</i>元 总金额:¥<span>0</span></p>
  40. <div class="del">删除</div>
  41. </div>
  42. <div>
  43. <div class="qx"></div>
  44. <span>全选</span><span class="gs"></span>
  45. <p class="a">金额总计:<span>0</span></p>
  46. </div>
  47. </div>

js

  1. $(function(){
  2. $('.add').click(function(){
  3. var n = $(this).prev().val()
  4. var num = parseInt(n) + 1;
  5. if(n == 5){num = 5} //设置最大数量 5
  6. $(this).prev().val(num);
  7. var money = $(this).parents('.gw').find('i').text()
  8. var sum = money * num
  9. var p = $(this).parents('.gw').find('span').text(sum)
  10. // console.log(p)
  11.  
  12. // var Sum = $(this).parents('.zong').find('.a > span').text(sum)
  13. // console.log(Sum)
  14. jiesuan()
  15. })
  16. $('.jian').click(function(){
  17. var n = $(this).next().val();
  18. var num = parseInt(n) - 1;
  19. if(n == 0){num = 0} //设置最小数量 0
  20. console.log(num)
  21. $(this).next().val(num);
  22. var money = $(this).parents('.gw').find('i').text()
  23. var sum = money * num
  24. var p = $(this).parents('.gw').find('span').text(sum)
  25. jiesuan()
  26. })
  27. //选中
  28. $('.choose').click(function(){
  29. $(this).toggleClass('choose-on')
  30. // console.log('aa')
  31. jiesuan()
  32. xz()
  33. qx()
  34. })
  35. //全选
  36. $('.qx').click(function(){
  37. $(this).toggleClass('qx-on')
  38. if($(this).is('.qx-on')){
  39. $('.choose').addClass('choose-on')
  40. }else{
  41. $('.choose').removeClass('choose-on')
  42. }
  43. jiesuan()
  44. qx()
  45. })
  46.  
  47. //删除
  48. $('.del').click(function(){
  49. if(confirm('确定删除商品')){
  50. $(this).parents('.gw').remove()
  51. }
  52. jiesuan()
  53. qx()
  54. // console.log(a)
  55.  
  56. })
  57. })
  58.  
  59. function jiesuan(){
  60. var num = 0;
  61. // alert('aa')
  62. $('.gw').each(function(){
  63. if($(this).find('.choose').is('.choose-on')){
  64. //获取物品单价
  65. var dj = $(this).find('i').text()
  66. //获取物品数量
  67. var sl = $(this).find('.num').val()
  68. //合计
  69. var hj = dj * sl
  70. num += hj;
  71. }
  72.  
  73. })
  74. $('.a>span').text(num)
  75. }
  76.  
  77. //单选--全选中
  78. function xz(){
  79. var choose = $('.choose')
  80. var choose_on = $('.choose-on')
  81. if(choose.length == choose_on.length){
  82. $('.qx').addClass('qx-on')
  83. }else{
  84. $('.qx').removeClass('qx-on')
  85. }
  86. }
  87.  
  88. //全选
  89. function qx(){
  90. $('.gs').text(' ')
  91. var a = $('.choose-on').length;
  92. $('.gs').text(a)
  93. if(a > 0){
  94. $('.gs').prev().text('已选')
  95. }else{
  96. $('.gs').prev().text('全选')
  97. }
  98. }

jq购物车结算功能的更多相关文章

  1. 原生JS实现购物车结算功能代码+zepto版

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  2. 微信小程序——购物车结算

    项目需要做个购物车结算功能,先分析需求: 1.全选,反选的功能.当选中的个数 = 购物车的数量时,勾选全选按钮,反之则取消选中全选按钮: 2.改变选中状态时,计算总价和总数量: 3.单个产品的数量加减 ...

  3. 使用jQuery制作一个简易的购物车结算流程

    因为今天下午时候在网上买了东西,在结算界面的时候突发奇想的也想自己动手做一个结算界面,当然了,只是一个最简易的结算界面,有商品数量的加减,有单价和小计,单个多个删除,全选和区县全选等等一些小功能,我在 ...

  4. python3 练习题(用函数完成登录注册以及购物车的功能)

    ''' 用函数完成登录注册以及购物车的功能 作业需求: 1,启动程序,用户可选择四个选项:登录,注册,购物,退出. 2,用户注册,用户名不能重复,注册成功之后,用户名密码记录到文件中. 3,用户登录, ...

  5. JS实现购物车动态功能

    整理了一下当时学js写的一些案例,觉得购物车功能在一般网站比较常见且基础,现在把它整理出来,需要的小伙伴可以参考一下. 该案例购物车主要功能如下: 1. 商品单选.全选.反选功能 2. 商品添加.删除 ...

  6. python实现简单的循环购物车小功能

    python实现简单的循环购物车小功能 # -*- coding: utf-8 -*- __author__ = 'hujianli' shopping = [ ("iphone6s&quo ...

  7. jquery-防多店铺购物车结算全选,单选,及删除,价格计算

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 微信小程序 - 实现购物车结算

    示例源码下载:小程序-实现购物车结算

  9. spring boot:用rocketmq消息订阅实现删除购物车商品功能(spring boot 2.3.3)

    一,为什么要使用消息队列实现删除购物车商品功能? 消息队列主要用来处理不需要立刻返回结果的业务, 常见的例子: 用户在下单后,要清除原购物车中的商品, 这个处理过程不需要马上实现也不需要返回结果给用户 ...

随机推荐

  1. Google2015校招在线測试题1----扫雷最少点击次数

    Problem Minesweeper is a computer game that became popular in the 1980s, and is still included in so ...

  2. BZOJ 1798: [Ahoi2009]Seq 维护序列seq (线段树乘法加法的混合操作)

     题目:点击打开链接 大意:一个数组.三个操作.第一种是区间[a,b]每一个数乘乘,另外一种是区间[a,b]每一个数加c,第三种是查询[a,b]区间的和并对p取摸. 两种操作就不能简单的仅仅往下传 ...

  3. Application.StartupPath获取执行文件路径substring()取特定长度字符串取得根目录

    Application.StartupPath获取执行文件路径substring()取特定长度字符串取得根目录 2012-07-20 10:48 257人阅读 评论(0) 收藏 举报 path usi ...

  4. ajax异步文件上传和进度条

    一.ajax异步文件上传 之前有说过在form表单内的文件上传,但是会刷新页面,下面就来实现不刷新页面的异步文件上传 <div class="uploding_div"> ...

  5. bzoj1106

    模拟+树状数组 先开始以为是先删距离最小的,这样可以减小上下的距离,然后觉得很难写,看码长很短,就看了题解,结果很奥妙 我们只考虑两种元素,就是如果像-a-b-a-b-这样的肯定得交换,如果像-a-b ...

  6. codevs1293送给圣诞夜的极光(bfs)

    1293 送给圣诞夜的极光  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold     题目描述 Description 圣诞老人回到了北极圣诞区,已经快到12点了 ...

  7. JS中的this是什么,this的四种用法

    在Javascript中,this这个关键字可以说是用的非常多,说他简单呢也很简单,说他难呢也很难,有的人开发两三年了,自己好像也说不清this到底是什么.下面我们来看看: 1.在一般函数方法中使用 ...

  8. $CF41D\ Pawn$

    \(problem\) 与这题 灰常的相似 然后内存可能过大 开个滚动数组 因为数塔问题总是 只需要上面一行的两个状态(这题就是数塔问题) 下面的代码与原题不符.(原题要输出路径)想抄的可以走了 输出 ...

  9. NS2学习笔记(二)

    Tcl语言 变量和变量赋值 set a "Hello World!" #将字符串赋值给变量a puts "NS2 say $a" #输出字符串的内容,其中$a表 ...

  10. hdu2027

    http://acm.hdu.edu.cn/showproblem.php?pid=2027 #include<iostream> #include<stdio.h> #inc ...