购物车单选全选,计算总价,出现个小问题,没找到.....
按照正常逻辑走这个代码没问题,但有一次我瞎点的时候,总价没有清空,而是继续向上加,然后继续瞎点就找不到这个问题。
列出来仔细琢磨
<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
购物车单选全选,计算总价,出现个小问题,没找到.....相关推荐
- uniapp手写 购物车单选 全选 反选
uniapp手写 购物车单选 全选 反选 这里是用图片切换的方法显示没有用到 checkbox 单选 选项 图片判断切换 全选 选项 图片判断切换 这里是用图片切换的方法显示没有用到 checkbox ...
- vue实现购物车简单的功能-单选全选总价计算、批量删除
vue实现购物车简单的功能-----单选全选总价计算.批量删除等 观看了后盾人视频教学,视频里面对于全选和单选的功能没有讲全,于是自己研究了一下,前端小白,也是第一次写博客,有什么不足和可以优化的地方 ...
- 使用计算属性实现购物车功能效果(商品数量增减、单选多选计算金额和总价,)
使用计算属性实现购物车效果(商品数量增减.单选多选计算金额和总价,) 涉及知识: Vue 基本指令 Vue 计算属性 使用 Vue 的基础语法知识,包括插值表达式与数据绑定.常用指令.计算属性等实现购 ...
- android二级联动购物车,Android实现二级购物车的全选加反选、总价功能
本文实例为大家分享了Android实现二级购物车的全选加反选.总价的具体代码,供大家参考,具体内容如下 MainActivity import android.support.v7.app.AppCo ...
- 模拟购物车页面全选单选的金额累加
1.前面部分的内容就不过多说明了,就是OkGo请求数据然后封装适配器加入数据源,先上代码 先上适配器的代码,注意这里使用的万能适配器,加入依赖 implementation 'com.github.C ...
- android 批量查找view,Android Recyclerview实现多选,单选,全选,反选,批量删除的功能
效果图如下: recyclerview 实现多选,单选,全选,反选,批量删除的步骤 1.在recyclerview布局中添加上底部的全选和反选按钮,删除按钮,和计算数量等控件 2.这里选中的控件没有用 ...
- android 全选功能,Android Recyclerview实现多选,单选,全选,反选,批量删除的功能
效果图如下: Recyclerview 实现多选,单选,全选,反选,批量删除的步骤 1.在Recyclerview布局中添加上底部的全选和反选按钮,删除按钮,和计算数量等控件 2.这里选中的控件没有用 ...
- android 获取通讯录全选反选_Android Recyclerview实现多选,单选,全选,反选,批量删除的功能...
效果图如下: Recyclerview 实现多选,单选,全选,反选,批量删除的步骤 1.在Recyclerview布局中添加上底部的全选和反选按钮,删除按钮,和计算数量等控件 2.这里选中的控件没有用 ...
- Flutter实战视频-移动电商-60.购物车_全选按钮的交互效果制作
60.购物车_全选按钮的交互效果制作 主要做全选和复选框的这两个功能 provide/cart.dart 业务逻辑写到provide里面 先持久化取出来字符串,把字符串编程list.循环list ca ...
最新文章
- linux网络编程-posix信号量与互斥锁(39)
- 小组结队项目-四则运算
- 学长毕业日记 :本科毕业论文写成博士论文的神操作20170316
- 2019\Province_C_C++_B\试题F-特别数的和
- 【Java12】tomcatservlet(nginx,web.xml,生命周期,适配器优化),requestresponse(请求转发,登陆案例(1),重定向,文件下载)
- 双系统环境下解决wine的字体为方块的问题
- 密度图的密度估计_不同类型的二维密度图小教程
- 湖畔大学官微改名为“湖畔创研中心”
- 数据结构C语言实现系列——线性表(线性表链接存储(单链表))
- Bailian2929 扩号匹配【堆栈】
- java Iterator源码
- 使用谷歌统计来跟踪网页加载时间
- 第11章 支撑向量机 SVM 学习笔记 下 SVM思路解决回归问题
- 把一个人的特点写具体作文_把一个人的特点写具体作文450字
- easyexcel导出excel文件之图片导出
- java小时钟实验报告_JAVA实验报告(运用JavaFx实现时钟动画).doc
- 玫瑰花的python程序代码_python玫瑰花代码讲解,怎样用程序编写编写玫瑰花的代码,c程序或gava或者python...
- 我国汽车的电磁辐射与电a磁兼容现状分析
- 2-1. Python 数据类型、运算
- 实现div中的div水平垂直居中
热门文章
- Visual Studio 安装自定义插件
- linux去掉空行的几种方法
- JVM老年代垃圾收集器Serial Old和Parallel Old
- Hbase+Phoenix+Mybatis+Springboot整合查询数据
- Android wifi carlife,carlife可以无线连接吗?carlife蓝牙连接流程
- Elasticsearch6.x和Kibana6.x的安装
- MIT研制出空陆自动切换型无人机技术,构想多年的“飞行车”或将实
- 一觉醒来感觉自己回到了九八年, 让大数据来解释
- 为什么实验是领英 DNA 的核心部分?
- 为什么响应式编程并非一时之势?