按照正常逻辑走这个代码没问题,但有一次我瞎点的时候,总价没有清空,而是继续向上加,然后继续瞎点就找不到这个问题。

列出来仔细琢磨

<ul class="shopcar_ul"><li class="shopcar_li"><p><label class=""><input type="checkbox" οnclick="onCheck(this)" name="check" sellprice="999.00" qty="1"></label></p></li><li class="shopcar_li"><p><label class=""><input type="checkbox" οnclick="onCheck(this)" name="check" sellprice="999.00" qty="1"></label></p></li><li class="shopcar_li"><p><label class=""><input type="checkbox" οnclick="onCheck(this)" name="check" sellprice="222.00" qty="1"></label></p></li>
</ul>
<div class="pay">
<label><input type="checkbox"><span>全选</span></label>
<div class="pay_right">
<p>
<span>合计:<b class="shop_zjg"></b></span>
</p>
</div>
</div>

//单选var sell;var qty; // 商品数量var jiage; //商品价格var zongjia = 0; //选中商品的总价var check = document.getElementsByName("check");function onCheck(target) {$(this).parent().toggleClass("on");if (target.checked) {$(".car_pay span").addClass("on");sell = target.attributes["sellprice"].nodeValue;qty = target.attributes["qty"].nodeValue;jiage = sell * qty; //当前选中商品的价格zongjia += jiage;//所有选中商品的价格document.getElementsByClassName('shop_zjg')[0].innerHTML = zongjia;} else {sell = target.attributes["sellprice"].nodeValue;qty = target.attributes["qty"].nodeValue;jiage = sell * qty;zongjia -= jiage;if (zongjia < 0) {//如果全选了在取消选中当前商品,这时候总价为0,所以我重新计算一下所有商品的总价var qj = 0;for (var i = 0; i < check.length; i++) {var jg = 0;sell = check[i].attributes["sellprice"].nodeValue;qty = check[i].attributes["qty"].nodeValue;jg = sell * qty;qj += jg;}zongjia = qj - jiage;}document.getElementsByClassName('shop_zjg')[0].innerHTML = zongjia;}for (var i = 0; i < check.length; i++) {//这个是判断是否全选的,用循环判断所有checked是否选中,有一个没被选中就不是全选。if (check[i].checked==true) {$(".pay label span").addClass("on");} else {$(".pay label span").removeClass("on");return;}}}

//全选$(".pay label span").click(function () {var quanjia = 0;if ($(this).hasClass("on")) {$(this).removeClass("on");$("label input").prop("checked", false);$("label").removeClass("on");document.getElementsByClassName('shop_zjg')[0].innerHTML = 0;} else {$(this).addClass("on");$("label input").prop("checked", true);$("label").addClass("on");for (var i = 0; i < check.length; i++) {sell = check[i].attributes["sellprice"].nodeValue;qty = check[i].attributes["qty"].nodeValue;jiage = sell * qty;quanjia += jiage;}document.getElementsByClassName('shop_zjg')[0].innerHTML = quanjia;zongjia = 0;}});

转载于:https://www.cnblogs.com/baixiao/p/7812931.html

购物车单选全选,计算总价,出现个小问题,没找到.....相关推荐

  1. uniapp手写 购物车单选 全选 反选

    uniapp手写 购物车单选 全选 反选 这里是用图片切换的方法显示没有用到 checkbox 单选 选项 图片判断切换 全选 选项 图片判断切换 这里是用图片切换的方法显示没有用到 checkbox ...

  2. vue实现购物车简单的功能-单选全选总价计算、批量删除

    vue实现购物车简单的功能-----单选全选总价计算.批量删除等 观看了后盾人视频教学,视频里面对于全选和单选的功能没有讲全,于是自己研究了一下,前端小白,也是第一次写博客,有什么不足和可以优化的地方 ...

  3. 使用计算属性实现购物车功能效果(商品数量增减、单选多选计算金额和总价,)

    使用计算属性实现购物车效果(商品数量增减.单选多选计算金额和总价,) 涉及知识: Vue 基本指令 Vue 计算属性 使用 Vue 的基础语法知识,包括插值表达式与数据绑定.常用指令.计算属性等实现购 ...

  4. android二级联动购物车,Android实现二级购物车的全选加反选、总价功能

    本文实例为大家分享了Android实现二级购物车的全选加反选.总价的具体代码,供大家参考,具体内容如下 MainActivity import android.support.v7.app.AppCo ...

  5. 模拟购物车页面全选单选的金额累加

    1.前面部分的内容就不过多说明了,就是OkGo请求数据然后封装适配器加入数据源,先上代码 先上适配器的代码,注意这里使用的万能适配器,加入依赖 implementation 'com.github.C ...

  6. android 批量查找view,Android Recyclerview实现多选,单选,全选,反选,批量删除的功能

    效果图如下: recyclerview 实现多选,单选,全选,反选,批量删除的步骤 1.在recyclerview布局中添加上底部的全选和反选按钮,删除按钮,和计算数量等控件 2.这里选中的控件没有用 ...

  7. android 全选功能,Android Recyclerview实现多选,单选,全选,反选,批量删除的功能

    效果图如下: Recyclerview 实现多选,单选,全选,反选,批量删除的步骤 1.在Recyclerview布局中添加上底部的全选和反选按钮,删除按钮,和计算数量等控件 2.这里选中的控件没有用 ...

  8. android 获取通讯录全选反选_Android Recyclerview实现多选,单选,全选,反选,批量删除的功能...

    效果图如下: Recyclerview 实现多选,单选,全选,反选,批量删除的步骤 1.在Recyclerview布局中添加上底部的全选和反选按钮,删除按钮,和计算数量等控件 2.这里选中的控件没有用 ...

  9. Flutter实战视频-移动电商-60.购物车_全选按钮的交互效果制作

    60.购物车_全选按钮的交互效果制作 主要做全选和复选框的这两个功能 provide/cart.dart 业务逻辑写到provide里面 先持久化取出来字符串,把字符串编程list.循环list ca ...

最新文章

  1. linux网络编程-posix信号量与互斥锁(39)
  2. 小组结队项目-四则运算
  3. 学长毕业日记 :本科毕业论文写成博士论文的神操作20170316
  4. 2019\Province_C_C++_B\试题F-特别数的和
  5. 【Java12】tomcatservlet(nginx,web.xml,生命周期,适配器优化),requestresponse(请求转发,登陆案例(1),重定向,文件下载)
  6. 双系统环境下解决wine的字体为方块的问题
  7. 密度图的密度估计_不同类型的二维密度图小教程
  8. 湖畔大学官微改名为“湖畔创研中心”
  9. 数据结构C语言实现系列——线性表(线性表链接存储(单链表))
  10. Bailian2929 扩号匹配【堆栈】
  11. java Iterator源码
  12. 使用谷歌统计来跟踪网页加载时间
  13. 第11章 支撑向量机 SVM 学习笔记 下 SVM思路解决回归问题
  14. 把一个人的特点写具体作文_把一个人的特点写具体作文450字
  15. easyexcel导出excel文件之图片导出
  16. java小时钟实验报告_JAVA实验报告(运用JavaFx实现时钟动画).doc
  17. 玫瑰花的python程序代码_python玫瑰花代码讲解,怎样用程序编写编写玫瑰花的代码,c程序或gava或者python...
  18. 我国汽车的电磁辐射与电a磁兼容现状分析
  19. 2-1. Python 数据类型、运算
  20. 实现div中的div水平垂直居中

热门文章

  1. Visual Studio 安装自定义插件
  2. linux去掉空行的几种方法
  3. JVM老年代垃圾收集器Serial Old和Parallel Old
  4. Hbase+Phoenix+Mybatis+Springboot整合查询数据
  5. Android wifi carlife,carlife可以无线连接吗?carlife蓝牙连接流程
  6. Elasticsearch6.x和Kibana6.x的安装
  7. MIT研制出空陆自动切换型无人机技术,构想多年的“飞行车”或将实
  8. 一觉醒来感觉自己回到了九八年, 让大数据来解释
  9. 为什么实验是领英 DNA 的核心部分?
  10. 为什么响应式编程并非一时之势?