HTML,CSS,JS完成购物车功能

这是我们要完成的购物车界面

1. 初始状态，当我选中某件商品时，总数量栏，总价栏显示默认数量和总价。
2. 当我点击全选按钮时，所有的复选框都要被我选到。当我取消全选按钮时，所有商品都要取消选中状态。
3. 当购物车处于全选状态时，如果我取消选中某一件商品，全选按钮就要处于未被选中的状态。
4. 当选中某个商品时，我可以对它进行任何操作，包括：增加、减少、删除。
5. 当我点击结算时，系统告诉我购物的总价。

通过HTML和CSS布局后可以得到下面这个模型（完整代码参考文尾）

紧接着我们就要在这基础上增加各种功能。

1. 全选按钮。

oSelect.onclick = function() {
		if (oSelect.checked) {
			for (var i = 0; i < aItems.length; i++) {
				if (aItems[i].checked) {

				} else {
					oSelect.checked = true;
					aItems[i].checked = true;
					getStart();
				}
			}
		} else {
			//全消
			for (var i = 0; i < aItems.length; i++) {
				if (aItems[i].checked) {
					aItems[i].checked = false;
					oSum.innerText = 0;
					oGoods.innerText = 0;
				} else {}
			}
		}
	}   

2. 单击复选框，判断我所勾选的复选框。

function getStart() {  
	var oSelect = document.getElementById("selectAll");
	var aItems = document.getElementsByClassName("check-one"); 
	var oSum = document.getElementById("priceTotal");
	var oGoods = document.getElementById("selectedTotal"); 
	
	var aSubtotal = document.getElementsByClassName("subtotal");
	var aCountInput = document.getElementsByClassName("count-input");   
	var a=0;
	
	for (var i=0; i<aItems.length; i++) {  
		if (aItems[i].checked) {   
			chooseIt(i); 
			a++; 
			if(a==3){
				oSelect.checked=true;	//当所有选项都选到时,全选按钮自动勾选
			}
		} else {  
			oSelect.checked = false;	//任意一个选项没勾选,全选按钮不选
			chooseIt(i);
		}
	}   
}

3.对商品进行加、减和删除。

function getPlus(n) {
	var aCountInput = document.getElementsByClassName("count-input"); 
	
	//增加单件商品的数量
	var temp = parseInt(aCountInput[n].value) + 1;
	aCountInput[n].value = temp;
}

function getReduce(n) {
	var aCountInput = document.getElementsByClassName("count-input");

	//减少单件商品的数量
	var temp = parseInt(aCountInput[n].value) - 1;
	aCountInput[n].value = temp;

	//当剪到数量为1件时,停止减
	if (aCountInput[n].value < 1) {
		aCountInput[n].value = 1;
	}
}

aDel[i].onclick = function() {  
		var oDialog = confirm("确定要删除吗?");
		if (oDialog) { 
			oTab.tBodies[0].removeChild(aDel[i].parentNode.parentNode);
			getGoods();
			getSum();
		}
		getStart(); 	//更新表格中行的数量
	}

4. 然后计算单件商品的总价，总商品的数量和总价。

function getTotal(n) {
	var aPrice = document.getElementsByClassName("price");
	var aCountInput = document.getElementsByClassName("count-input");
	var aSubtotal = document.getElementsByClassName("subtotal");
	
	//计算单件商品的总价
	var oMoney = parseInt(aPrice[n].innerText) * parseInt(aCountInput[n].value);
	aSubtotal[n].innerText = oMoney;
}

function getGoods() { 
	var num = 0;
	var oGoods = document.getElementById("selectedTotal");
	var aItems = document.getElementsByClassName("check-one");
	var aCountInput = document.getElementsByClassName("count-input"); 
	
	//循环,计算选中的商品的总数量
	for (var i = 0; i < aItems.length; i++) {
		if (aItems[i].checked) {
			num += parseInt(aCountInput[i].value);
		} else {
			num += 0;
		}
	}

	oGoods.innerText = num;
}

function getSum() {
	var temp = 0;
	var oSum = document.getElementById("priceTotal");
	var aItems = document.getElementsByClassName("check-one");
	var aSubtotal = document.getElementsByClassName("subtotal");
	
	//循环,计算选中的商品的总价格
	for (var j = 0; j < aItems.length; j++) {
		if (aItems[j].checked) {
			temp += parseInt(aSubtotal[j].innerText);
		} else {
			temp += 0;
		}
	}

	oSum.innerText = temp;
}

5.结算时弹出文本框显示所花的金额。（这一步超级简单，只需要把总价栏的金额弹出来即可）

function showTotal() {
	var money = document.getElementById("priceTotal").innerText;
	alert("你总共花了" + money + "大洋");
}

在这里我们就完成了购物车，购物车看起来很简单，但实际操作起来还是要严谨的逻辑思维，基于曾经看别人关于购物车的博客，多多少少都有些小细节上的错误或者不完善，在此我给大家一个完美的购物车，希望能帮助到大家，大家有疑问可在下方评论，看到了会及时回复的哟！

详细代码: https://github.com/Siwen19/js/tree/master/myShoppingCart