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

效果图展示：

说下大致的思路吧：

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 );//数量加1

num = 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 );//数量减1

num = input.attr("value");

price = num*per;//

obj.siblings(".d5").find(".cart-price").text(price);

count();

})

})

</script>

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