本文详细讲解如何使用jQuery和Bootstrap 3构建购物车前端界面。内容涵盖全选逻辑、小计计算、汇总更新及删除功能，重点解析checkbox属性读取、DOM元素定位及事件绑定的具体实现方法。
购物车前端开发概述
对于独立于软件公司的工程师而言，工作范围往往不仅限于后端开发（如PHP、Java或SQL），还需兼顾前端技术（HTML、JavaScript、CSS等）。本文旨在分享一个在实际项目中应用的购物车前端开发案例。
本文聚焦于购物车的核心交互操作，包括产品数量的增减以及删除购物车内的商品项，并假设购物车中已存在若干商品。首先展示两张效果示意图。
HTML结构与框架使用
HTML部分代码使用了JQuery 1.11版本与Bootstrap 3框架。
<!DOCTYPE html>
<html>
<HEADER>
<meta charset="UTF-8">
<title>Shopping Cart</title>
<script type="text/javascript" src="jquery-1.11.min.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link href="bootstrap.min.css" media="screen" rel="stylesheet" type="text/css" />
</HEADER>
<body class="container">
<table id="cartTable" class="cart table table-condensed" >
<thead>
<tr>
<th style="width:60px;"><label><input class="check-all check" type="checkbox" /> 全选</label></th>
<th><label>产品型号</label></th>
<th style="width:100px;"><label>单价</label></th>
<th style="width:120px;"><label>数量</label></th>
<th style="width:100px;"><label>小计</label></th>
<th style="width:40px;"><label>操作</label></th>
</tr>
</thead>
<tbody>
<tr >
<td ><input class="check-one check" type="checkbox" /> </td>
<td class="goods">
<label>Item 1</label>
</td>
<td class="number small-bold-red"><span>76.55</span></td>
<td class="input-group">
<span class="input-group-addon minus">-</span>
<input type="text" class="number form-control input-sm" value="10" />
<span class="input-group-addon plus">+</span>
</td>
<td class="subtotal number small-bold-red">101</td>
<td class="operation"><span class="delete btn btn-xs btn-primary">删除</span></td>
</tr>
<tr>
<td ><input class="check-one check" type="checkbox" /></td>
<td class="goods">
<label>Item 2</label>
</td>
<td class="number small-bold-red"><span>1100</span></td>
<td class="input-group">
<span class="input-group-addon minus">-</span>
<input type="text" class="number form-control input-sm" value="1" />
<span class="input-group-addon plus">+</span>
</td>
<td class="subtotal number small-bold-red">352</td>
<td class="operation"><span class="delete btn btn-xs btn-primary">删除</span></td>
</tr>
<tr>
<td ><input class="check-one check" type="checkbox" /></td>
<td class="goods">
<label>Item 3</label>
</td>
<td class="number small-bold-red"><span>1200</span></td>
<td class="input-group">
<span class="input-group-addon minus">-</span>
<input type="text" class="number form-control input-sm" value="1" />
<span class="input-group-addon plus">+</span>
</td>
<td class="subtotal number small-bold-red">9876.55</td>
<td class="operation"><span class="delete btn btn-xs btn-primary">删除</span></td>
</tr>
<tr>
<td ><input class="check-one check" type="checkbox" /></td>
<td class="goods">
<label>Item 4</label>
</td>
<td class="number small-bold-red"><span>1400</span></td>
<td class="input-group">
<span class="input-group-addon minus">-</span>
<input type="text" class="number form-control input-sm" value="1" />
<span class="input-group-addon plus">+</span>
</td>
<td class="subtotal number small-bold-red">9876.55</td>
<td class="operation"><span class="delete btn btn-xs btn-primary">删除</span></td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-md-12 col-lg-12 col-sm-12">
<div style="border-top:1px solid gray;padding:4px 10px;">
<div style="margin-left:20px;" class="pull-right total">
<label>金额合计:<span class="currency">￥</span><span id="priceTotal" class="large-bold-red">0.00</span></label>
</div>
<div class="pull-right">
<label>您选择了<span id="itemCount" class="large-bold-red" style="margin:0 4px;"></span>种产品型号，共计<span id="qtyCount" class="large-bold-red" style="margin:0 4px;"></span>件</label>
</div>
<div class="pull-right selected" id="selected">
<span id="selectedTotal"></span>
</div>
</div>
</div>
</div>
</body>
</html>
HTML结构主要包含两部分：TABLE部分用于展示购物车内的商品明细，其后的DIV部分用于显示汇总信息。此处涉及一个值得注意的技术技巧：
1. 为元素指定一些在样式表中不存在的自定义class名称（如check-all、check-one、cart、subtotal），以便利用JQuery的过滤器快速定位特定元素。
JavaScript功能实现
Javascript代码需实现以下核心功能：
1. 实现商品全选功能。
2. 计算单个商品的小计金额（即单价乘以购买数量）。
3. 当用户选中购物车中的特定商品型号时，需重新计算页面底部的汇总信息，包括选中商品的种类、数量小计及金额小计。
4. 当用户删除购物车中的商品型号或修改购买数量时，需重新计算页面底部的汇总信息。
接下来对上述功能逐一进行说明：
1. 商品全选功能的实现逻辑。
全选功能与checkbox处理
$(cartTable).find(":checkbox").click(function() {
//全选框单击
if ($(this).hasClass("check-all")) {
var checked = $(this).prop("checked");
$(cartTable).find(".check-one").prop("checked", checked);
}
//如果手工一个一个的点选了所有勾选框，需要自动将“全选”勾上或是取消
var items = cartTable.find("tr:gt(0)");
$(cartTable).find(".check-all").prop("checked", items.find(":checkbox:checked").length == items.length);
getTotal();
});
为购物车表格中的每个复选框绑定单击事件。在此事件中，需判断用户点击的是“全选”复选框还是单个商品的复选框，这再次用到了前述的自定义class名称。需特别说明的是，JQuery读取元素属性通常使用attr()方法，但对于checkbox的checked属性，attr()无法正确读取，必须使用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)表示选择表格中所有索引大于0的tr元素（即排除第一个tr元素）。原因在于回顾HTML代码可知，第一个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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。