纯jquery实现模仿淘宝购物车结算

这篇文章里，将会提到购物车里的所有功能。包括全选、单选金额改变。在增加数量时金额也会相应改变。
效果图展示：

说下大致的思路吧：
1、首先是计算一行的价格。这个功能在上篇博客里有提到，这里就不列举出来了。
2、遍历选中的几行，将每行的数值相加。
3、将值赋给总金额显示出来。当取消勾选或加减数量时，金额会相应改变。
下面是具体的js部分：

<script type="text/javascript">$（function（）{//计算总金额function totalMoney（）{var total_price = 0;var total_count = 0;$（".d1-input"）.each（function（）{if（$（this）.hasClass（"status"）） {var obj1 = $（this）.parent（）.siblings（".d4"）.find（".count"）.val（）;//获取一行的商品数量total_count += parseInt（obj1）;var obj2= $（this）.parent（）.siblings（".d5"）.find（".cart-price"）.text（）;//获取一行的金额total_price += parseInt（obj2）;}}）;$（".item"）.text（total_count）;//将计算出的总金额显示$（".total"）.text（total_price）;//将计算出的总数量显示}//全选$（".d-input"）.toggle（ function（）{$（this）.addClass（"status"）;$（".sc-mid-list .d1-input"）.addClass（"status"）;//添加勾选样式$（".sc-mid-list"）.addClass（"mouseover"）;totalMoney（）;},function（）{$（this）.removeClass（"status"）;$（".sc-mid-list .d1-input"）.removeClass（"status"）;//取消勾选样式$（".sc-mid-list"）.removeClass（"mouseover"）;totalMoney（）;}）;// 单选$（".d1-input"）.toggle（ function（）{$（this）.addClass（"status"）;//添加勾选样式$（this）.parents（".sc-mid-list"）.addClass（"mouseover"）;totalMoney（）;},function（）{$（this）.removeClass（"status"）;//取消勾选样式$（this）.parents（".sc-mid-list"）.removeClass（"mouseover"）;totalMoney（）;}）;// 减号样式function count（）{$（".count"）.each（function（）{var num = $（this）.val（）;if （num == 1） {$（this）.siblings（".reduce"）.removeClass（"two"）.addClass（"one"）;$（this）.siblings（".reduce"）.attr（"disabled","disabled"）;} else {$（this）.siblings（".reduce"）.removeClass（"one"）.addClass（"two"）;}}）//根据数量是否为1，改变减号的样式}// 加$（".sc-mid-list .add"）.click（function（）{var input = $（this）.siblings（".count"）;var obj = $（this）.parents（".d4"）;var per = parseFloat（obj.siblings（".d3"）.find（".per"）.text（））;//获取当前一行的单价var num = "";var price = "";input.attr（"value", parseInt（input.attr（"value"）） + 1 ）;//数量加1num = input.attr（"value"）;price = num*per;//obj.siblings（".d5"）.find（".cart-price"）.text（price）;count（）;totalMoney（）;}）// 减$（".sc-mid-list .reduce"）.click（function（）{var input = $（this）.siblings（".count"）;var obj = $（this）.parents（".d4"）;var per = parseFloat（obj.siblings（".d3"）.find（".per"）.text（））;//获取当前一行的单价var num = "";var price = "";var Val = parseInt（input.attr（"value"））;if（Val <= 1）{Val = 2;}input.attr（"value", parseInt（Val） - 1 ）;//数量减1num = input.attr（"value"）;price = num*per;//obj.siblings（".d5"）.find（".cart-price"）.text（price）;count（）;}）}）</script>

jquery模仿淘宝悬挂购物车物品结算功能-附源码下载

查看演示源码下载