jQuery实现购物车功能（小计、总计）

html

<html>
<body><!-- 购物车开始 --><form class="buyCar"><!-- 购物车上部开始 --><div class="top"><div class="box1"><input type="checkbox" class="allSelect" id="allSelect"><label for="allSelect">全选</label></div><div class="box2">商品</div><div class="box3">单价</div><div class="box4">数量</div><div class="box5">小计</div><div class="box6">操作</div></div><div class="clear"></div><div class="top2"></div><!-- 购物车上部结束 --><!-- 购物车中部开始 --><div class="middle"><div class="goods"><div class="box11"><input type="checkbox" class="check"><a href="#"><img src="img/goods1.png" alt=""></a></div><div class="box12"><span class="jingzao">京造</span><span>京造婴儿儿童理发器 宝宝剃头器 电推剪发器专业防水充电电动理发器 绿</span></div><div class="box13"><span>颜色：绿色</span></div><div class="box14"><div>&yen;<span>108.00</span></div></div><div class="box15"><span class="minus">-</span><span class="num">1</span><span class="plus">+</span></div><div class="box16"><div>&yen;<span class="subPrice" id="subPrice1">108.00</span></div></div><div class="box17"><a href="#">删除</a></div></div><div class=" clear"></div><div class="goodsSpace"></div><div class="goods"><div class="box11"><input type="checkbox" class="check"><a href="#"><img src="img/goods2.png" alt=""></a></div><div class="box12"><span class="shengxian">生鲜</span><span>海南妃子笑荔枝 1.5kg装 新鲜水果</span></div><div class="box13"><span>颜色：海南妃子笑荔枝 1.5k...</span></div><div class="box14"><div>&yen;<span id="price2">29.90</span></div></div><div class="box15"><span class="minus">-</span><span class="num" id="num2">1</span><span class="plus">+</span></div><div class="box16"><div>&yen;<span class="subPrice" id="subPrice2">29.90</span></div></div><div class="box17"><a href="#">删除</a></div></div></div><!-- 购物车中部结束 --><!-- 购物车下部开始 --><div class="bottom"><div class="left"><input type="checkbox" class=""><label for="allSelect">全选</label><a href="#">删除选中的商品</a><a href="#">移到我的关注</a><a href="#" class="clearCar">清理购物车</a></div><div class="right"><div class="allPrice"><div><span class="str">已选择<span class="fontColor1">0</span>件商品</span>总价：<span class="fontColor2">&yen;<span class="allPrice1" id="finalPrice">0.00</span></span></div></div><div class="balance">去结算</div></div></div><!-- 购物车下部结束 --></form><!-- 购物车结束 -->
</body>

</html>

script

<script>$(".plus").on("click",function(){var num=$(this).prev().html();           //获取商品初始数量1$(this).prev().html(Number(num)+1);//此时已将数字直接写入标签内，是动作var buynum=$(this).prev().html();   //得到+1之后的商品数量，即购买数量var price=$(this).parent().prev().children().children().html();     //获取商品单价$(this).parent().next().children().children().html((buynum*Number(price)).toFixed(2));
//        console.log(smallPrice);allPrice();checkNum();});$(".minus").on("click",function(){var num=$(this).next().html();           //获取此时商品数量if(num>1){$(this).next().html(Number(num)-1);//此时已将数字直接写入标签内，是动作var buynum=$(this).next().html();   //得到-1之后的商品数量，即购买数量var price=$(this).parent().prev().children().children().html();     //获取商品单价$(this).parent().next().children().children().html((buynum*Number(price)).toFixed(2));}else{alert("再点就没了");}allPrice();checkNum();});//全选$(".allSelect").click(function(){
//        console.log(this);if(this.checked==true){$(".check").prop("checked",true);}else{$(".check").prop("checked",false);}allPrice();checkNum();});//单选$(".check").click(function(){var check=$(".check").length;var checked=$(".check:checked").length;if(check==checked){$(".allSelect").prop("checked",true);}else{$(".allSelect").prop("checked",false);}allPrice();checkNum();});function checkNum(){var num=0;$(".check").each(function(){if(this.checked==true){var b=$($(this).parent().next().next().next().next().children()[1]).html();num+=Number(b);}});$(".fontColor1").html(num);}function allPrice(){var sum=0;$(".check").each(function(){if(this.checked==true){var a=$($(this).parent().next().next().next().next().next().children().children()[0]).html();    //单类商品数量
//                console.log($($(this).parent().next().next().next().next().next().children().children()[0]).html());sum+=Number(a);}});$(".allPrice1").html(sum);}</script>

css

body,div,a,img{padding: 0;margin: 0;font-size: 12px;color: #666;}
a{text-decoration: none;}
.clear{clear: both;}
.buyCar{width: 1000px;height: 450px;margin: 0 auto;}
.top{width: 1000px;height: 40px;line-height: 40px;background-color: #f3f3f3;border: 1px solid #f1f1f1;}
.box1{width: 130px;float: left;}
.box1 input{position: relative;top: 2px;}
.box2{width: 440px;float: left;}
.box3{width: 100px;float: left;text-align: center;}
.box4{width: 100px;float: left;text-align: center;}
.box5{width: 130px;float: left;text-align: center;}
.box6{width: 100px;float: left;}
.top2{width: 1000px;height: 40px;border-bottom: 2px solid #aaa;}.middle{width: 1000px;border: 1px solid #f1f1f1;}
.goods{width: 1000px;height: 120px;padding-top: 18px;background-color: #fff4e8;}
.box11{width: 130px;float: left;}
.box11 img{width: 80px;height: 80px;vertical-align: top;}
.box12{width: 210px;float: left;color: #333;}
.jingzao{color: #fff;background-color: #e2231a;display: inline-block;width: 28px;height: 15px;line-height: 15px;text-align: center;}
.shengxian{color: #02c555;border: 1px solid #02c555;display: inline-block;width: 28px;height: 15px;line-height: 15px;text-align: center;}
.box13{width: 230px;float: left;text-indent: 20px;}
.box14{width: 100px;float: left;text-align: center;color: #333;letter-spacing: 0.5px;}
.box15{width: 100px;float: left;text-align: center;}
.box15 .addLow{display: inline-block;width: 16px;height: 22px;border: 1px solid #cacbcb;position: relative;top: -4px;line-height: 22px;cursor: pointer;}
.box15 .num{display: inline-block;width: 46px;height: 22px;border-top: 1px solid #cacbcb;border-bottom: 1px solid #cacbcb;position: relative;top: -4px;line-height: 22px;}
.box16{width: 130px;float: left;text-align: center;}
.box16 div{font-weight: bold;font-size: 13px;color: #000;letter-spacing: 1px;}
.box17{width: 100px;float: left;}
.goodsSpace{width: 1000px;height: 40px;border-top: 1px solid #ccc;}.bottom{width: 1000px;height: 50px;border: 1px solid #f0f0f0;line-height: 50px;margin-top: 20px;}
.bottom .left{width: 320px;height: 50px;float: left;}
.bottom .left input{position: relative;top: 2px;}
.bottom .left a{margin-left: 8px;}
.bottom .left .clearCar{font-weight: bold;}
.bottom .right{width: 380px;height: 50px;float: right;}
.bottom .right .allPrice{width: 260px;height: 40px;margin-top: 5px;float: left;line-height: 16px;}
.bottom .right .allPrice .str{margin-right: 38px;}
.bottom .right .allPrice .fontColor1{color: #f00;font-weight: bold;margin: 0 3px;}
.bottom .right .allPrice .fontColor2{color: #f00;font-weight: bold;font-size: 16px;}
.bottom .right .balance{width: 96px;height: 50px;background-color: #e64346;color: #fff;font-size: 18px;font-weight: bold;line-height: 50px;text-align: center;float: right;cursor: pointer;}

jQuery实现购物车功能（小计、总计）相关推荐

Excel·VBA选中列一键计算小计总计
不同于<Excel·VBA一键计算每月合计>,仅对指定关键字计算合计数,而本文可以实现对选中列自动插入小计.总计行并求和目录连续相同关键值自动小计举例固定行数分段自动小计连续相同 ...
postgre——case、union、小计总计（GROUP BY ROLLUP）写法
//将几张不同表结构的数据全部合并在一起,使用了case.union,同时实现小计总计 //小计总计使用的 GROUP BY ROLLUP函数,GROUP BY ROLLUP使用双括号将字段括起来,是 ...
j2ee:servlet练习鲜花项目(购物车、分页、ajax、iframe弹出层、jquery、json(计算小计、总计)、map集合高级遍历、图片上传)...
第一:概念购物车全过程的理解: 1.新建一个购物车类,这样,这个类里面就可以封装商品对象和商品数量了. 2.每种商品都是一个购物车 3.把所有的购物车放在一起,也就是放在一个map集合中,这样 ...
Java-实现购物车功能小系统
题目要求:使用面向对象的概念表示出下面的生活场景,某人去超市买东西,所有买到的东西都放在了购物车之中,最后到收银台一起结账. 购物车小系统实现以下功能: * 1.自行把商品放入购物车(添加商品) ...
SAP小技巧之实现SMARTFORM打印中的小计与总计
点击蓝字关注我们一前言公众号群里面有人在讨论SMARTFORM打印中的小计和总计的实现.好久没有做SMARTFORM了, 所以没有参与讨论. 后来网上查询了一下. 也没有找到很好的解决方案.所 ...
jQuery实现简单购物车功能
jQuery实现购物车功能有: 主要有添加商品增加和减少商品数量点击购物车时库存也相应的减少数量的减少库存进行增加根据增加.减少或选择的商品获取金额实现商品价格的计算删除 ...
javaweb实现购物车功能
本篇文章讲的是如何使用javaweb相关知识模拟购物车功能 (web练手小项目) 使用到的相关知识(部分知识点在文章中简单涉及到): html cs javascript jsp servle ...
php购物车数据表,PHP开发简单购物车功能创建数据库表
前面的章节我们分别介绍了javascript和jquery实现购物车功能. 本章节我们将通过php代码来为朋友们讲解购物车功能实现思路. 方法是把从数据库中获取的商品存入数组,对数组进行操作,数组中的 ...
jQuery实现PC端商城购物车模块基本功能（每个商品的小计和合计都会根据添加和删除的操作来动态计算）
jQuery实现PC端商城购物车模块基本功能先上效果图: 因为主要是想练习jQuery的使用,所以页面CSS部分比较简陋,有需要的话,大家在参考代码时,可以自己再完善下CSS部分的代码,让购物车页面 ...

jQuery实现购物车功能（小计、总计）

jQuery实现购物车功能（小计、总计）相关推荐

最新文章

热门文章