jQuery购物车

$(function() {

//1.全选功能
//当我们点击这个全选按钮（checkall）的时候，要用全选按钮的状态设置三个商品里的按钮(j-checkbox)的状态
//可以使用change事件
$('.checkall').change(function() {
	$('.j-checkbox,.checkall').prop("checked", $(this).prop("checked"));
	//2.背景色的添加与删除
	if ($(this).prop("checked")) {
		$('.cart-item').addClass("check-cart-item");
	} else {
		$('.cart-item').removeClass("check-cart-item");
	}
})

//2.从商品列表的内部来实现全选功能
//判断一下商品列表内的复选框内打勾的个数==3
$('.j-checkbox').change(function() {
	//用:checked选择器，直接查找被选中的元素
	//如果被选中的复选框的个数等于所有复选框的个数，那就把全选给选上
	if ($('.j-checkbox:checked').length == $('.j-checkbox').length) {
		//选中全选按钮
		$('.checkall').prop("checked", true);
	} else {
		//否则，不选中
		$('.checkall').prop("checked", false);
	}
	//被选中的添加背景色
	if ($(this).prop("checked")) {
		$(this).parent().parent(".cart-item").addClass("check-cart-item");
		//getSum();
	} else {
		$(this).parent().parent(".cart-item").removeClass("check-cart-item");
	}
	getSum();
})

数量改变

//3.商品数量模块的增加，点击+，需要有一个变量实现自增功能，后把变量的值给文本框
$('.increment').click(function() {
	//点击得到当前文本框的值
	var n = $(this).siblings(".itxt").val();
	n++;
	//console.log(n);
	$(this).siblings(".itxt").val(n);
	//商品的小计模块的实现

	//console.log($(this).parent().parent().siblings("p-sum").html());
	//console.log($(this).parent().parent().siblings("p-sum").text());
	//(1)商品的单价
	var p = $(this).parent().parent().siblings(".p-price").html();
	//substr()截取字符串，从0开始
	p = p.substr(1); //substr截取字符串，从第二位开始
	console.log(p);
	//toFixed() 保留几位小数
	var pSum = (p * n).toFixed(2); //保留两位小数
	console.log(pSum);
	$(this).parent().parent().siblings(".p-sum").html("￥" + pSum);
	getSum();
})
//自减模块
$('.decrement').click(function() {
	//定义一个变量，初始值等于input中的value值
	var n = $(this).siblings(".itxt").val();
	if (n > 1) {
		n--;
		$(this).siblings(".itxt").val(n);
		var p = $(this).parent().parent().siblings(".p-price").html();
		//$(this).parents(".p-num");
		p = p.substr(1);
		console.log(p);
		var pSum = (p * n).toFixed(2);
		console.log(pSum);
		$(this).parent().parent().siblings(".p-sum").html("￥" + pSum);
		getSum();
	} else {
		alert("是否删除该商品？")
		return false;
	}
	//console.log(n); 
})
//直接输入数量
$('.itxt').change(function() {
	var n = $(this).val();
	var p = $(this).parent().parent().siblings(".p-price").html();
	p = p.substr(1);
	var pSum = (p * n).toFixed(2);
	$(this).parent().parent().siblings(".p-sum").html("￥" + pSum);
	getSum();
})

删除商品

//删除商品
//1.单个删除
$('.p-action a').click(function() {
	$(this).parents('.cart-item').remove();
	getSum();
})
//2.删除选中的商品
$('.remove-batch').click(function() {
	$('.j-checkbox:checked').parents('.cart-item').remove();
	getSum();
})
//3.清理购物车
$('.clear-all').click(function() {
	$('.cart-item').remove();
	getSum();
})
if ($('.j-checkbox').prop('checked')) {
	getSum();
}
//先调用一下，页面初始状态就可以获取到商品总数和总价
getSum();

计算总价的函数

//计算总价的函数
function getSum() {
	//总的个数
	var count = 0;
	$('.itxt').each(function(i, ele) {
		if ($(ele).parents('.p-num').siblings('.p-checkbox').children('.j-checkbox').prop(
				'checked')) {
			count += parseInt($(ele).val());
		}
	})
	$('.amount-sum em').text(count);
	//总价
	var money = 0;
	$('.p-sum').each(function(i, ele) {
		if ($(ele).siblings('.p-checkbox').children('.j-checkbox').prop('checked')) {
			money += parseFloat($(ele).text().substr(1));
		}
	});
	$('.price-sum em').text(money.toFixed(2));

}

})
实现效果