为购物车表格中的每一样选择框绑定单击事件。在这个事件中，需要判断出用户点击的是“全选”的选择框，还是每一个产品自己的选择框，那么这里就又一次用到了上面提到的虚假样式。这里需要特别说明的是JQuery读取元素的属性通常是使用attr()方法，但是对于checkbox来说，使用attr()无法正确读取到其checked属性值。正确用法是使用prop()方法来读取。
如果用户点击了“全选”，那么所有的选择框都应该被选中，这一点很容易考虑到。但是有一个细节需要注意，就是在用户手工一个一个的将所有产品选中时，程序应该将“全选”框也设为选中状态，或是在全部选中的状态下，用户手工取消了某一个产品的选中状态，那么程序也应该将“全选”框设为未选中状态。
最后一行代码是在用户选择完毕后，需要重新计算购物车的汇总信息。
2.产品小计功能代码：
/* * 计算购物车中每一个产品行的金额小计 * * 参数 row 购物车表格中的行元素tr * */ function getSubTotal(row) { var price = parseFloat($(row).find("span:first").text()); //获取单价 var qty = parseInt($(row).find(":text").val()); //获取数量 var result = price * qty; //计算金额小计 $(row).find(".subtotal").text(result.toFixed(2)); //将计算好的金额小计写入到“小计”栏位中 };
这个函数需要传入一个参数，即用于显示购物车内容的tr元素。
在显示购物车内容的表格中，每一个产品单价使用一个span元素包裹，且是这一行中的第一个span元素，使用JQuery过滤器$(row).find("span:first")即可以定位到产品单价，使用其text函数读取内容，并使用parseFloat将读取到的字符串转为浮点数。
购买数量，因为用户可能会去改变，所以使用input来展现。同事，使用如下过滤器即可定位到数量
$(row).find(":text")
并使用parseInt将其转为整数。在计算好单个产品金额小计之后，就需要将其写入到“小计”栏位中，使用toFixed方法，将数字格式化为带有两位小数样式。
3.购物车金额汇总
/* * 计算购物车中产品的累计金额 * * */ function getTotal() { var qtyTotal = 0; var itemCount = 0; var priceTotal = 0; $(cartTable).find("tr:gt(0)").each(function() { if ($(this).find(":checkbox").prop("checked") == true) { //如果选中 itemCount++; //累加产品品种数量 qtyTotal += parseInt($(this).find(":text").val()); //累计产品购买数量 priceTotal += parseFloat($(this).find(".subtotal").text()); //累计产品金额 } }); $("#itemCount").text(itemCount); $("#qtyCount").text(qtyTotal); $("#priceTotal").text(priceTotal.toFixed(2)); };
计算购物车汇总信息时，应该是遍历购物车中所有的行，将每一行的小计和数量分别进行累加即可。这里使用一个技巧来获取购物车表格中的所有行$(cartTable).find("tr:gt(0)")
这里使用的tr:gt(0)是表示选择表格中所有的tr元素并且索引是大于0的（即除去第一个tr元素），这是为什么呢？我们回头看一下HTML代码就不难发现，第一个tr元素是表格标题头，不包含任何业务数据，所以在遍历时，应该除去这一个tr元素。
4.用户删除产品，或是修改购买数量时重新计算产品小计和汇总信息
//为数量调整的＋ －号提供单击事件，并重新计算产品小计 /* * 为购物车中每一行绑定单击事件，以及每行中的输入框绑定键盘事件 * 根据触发事件的元素执行不同动作 * 增加数量 * 减少数量 * 删除产品 * */ $(cartTable).find("tr:gt(0)").each(function() { var input = $(this).find(":text"); //为数量输入框添加事件，计算金额小计，并更新总计 $(input).keyup(function() { var val = parseInt($(this).val()); if (isNaN(val) || (val < 1)) { $(this).val("1"); } getSubTotal($(this).parent().parent()); //tr element getTotal(); }); //为数量调整按钮、删除添加单击事件，计算金额小计，并更新总计 $(this).click(function() { var val = parseInt($(input).val()); if (isNaN(val) || (val < 1)) { val = 1; } if ($(window.event.srcElement).hasClass("minus")) { if (val > 1) val--; input.val(val); getSubTotal(this); } else if ($(window.event.srcElement).hasClass("plus")) { if (val < 9999) val++; input.val(val); getSubTotal(this); } else if ($(window.event.srcElement).hasClass("delete")) { if (confirm("确定要从购物车中删除此产品？")) { $(this).remove(); } } getTotal(); });
我在这里并不是一一对“增加”、“减少”和“删除”按钮进行事件绑定，而是将单击事件统一绑定在TR行上，再对触发单击事件的元素进行判断，进而决定执行何种操作。
点击“＋”或是“－”按钮时，程序会将数量加一或是减一，并重新计算产品小计和汇总信息。
同时，还为数量输入框绑定了键盘事件，在输入框内每按下一次键盘，都会触发该事件，重新计算产品小计和汇总信息。
至此，购物车的前端开发，算是告一段落。
小伙伴们可以使用以下链接获取源码：https://github.com/chris-mao/ShoppingCart.git