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. Android应用程序无法读写USB设备的解决方法

    假设android系统中的API或者apk无法读写usb设备.可能是没有加入读写usb的权限,须要依照例如以下方法进行设置: 1. 在android.hardware.usb.host.xml文件里加 ...

  2. NATS连线协议具体解释

    NATS连线协议具体解释 作者:chszs,未经博主同意不得转载.经许可的转载需注明作者和博客主页:http://blog.csdn.net/chszs NATS的连线协议是一个简单的.基于文本的公布 ...

  3. 应用程序无法正常启动 0xc0000013 vs2013

    今天下午切换到Windows 优化代码,在debug 的时候一直出现这个问题,折腾了很久,发现原来是系统环境变量的问题,我之前装了双系统,讲原来win7 下的一块E盘删掉做了Linux 盘,而系统环境 ...

  4. mysql安装后改动port号password默认字符编码

    1.改动password grant all privileges on *.* to 'root'@'localhost' identified by 'new password'; 2.改动por ...

  5. JPush 初始化失败,直接按照官方文档的格式写的,portal上的包名肯定不会错,mainfest里面直接指定${applicationId}

    错误日志: 11-27 09:59:19.670 26124-26124/? D/dalvikvm: Late-enabling CheckJNI 11-27 09:59:20.008 26124-2 ...

  6. Silverlight 2学习笔记一:初识Silverlight

    Silverlight,问世至今已有好一段时日了,向来只是只闻其名,不知其实,今天终于对Silverlight有了点初步的了解. 一.Silverlight是什么?Sliverlight是基于.NET ...

  7. php安全过滤类

    /*ansic码-Url码表: http://www.w3school.com.cn/tags/html_ref_urlencode.html ---------------------------- ...

  8. codevs3287货车运输(最小生成树+LCA)

    3287 货车运输 2013年NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond     题目描述 Description A 国有 ...

  9. [Swift通天遁地]六、智能布局-(1)给视图添加尺寸和中心点的约束

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  10. xfs文件备份恢复篇一vm中linux新增磁盘

    XFS提供了 xfsdump 和 xfsrestore 工具协助备份XFS文件系统中的数据.xfsdump 按inode顺序备份一个XFS文件系统.centos7选择xfs格式作为默认文件系统,而且不 ...