关于js的购物车代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/cart.css"/>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/cart.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="" class="cart">
			<form action="cart.html" method="post">
			<table width="1000" border="0" cellspacing="0" cellpadding="0">
				<thead>
				<tr><th width="100px">
				<input type="checkbox" id="checkAll" />全选</th>
				<th width="150px">图片</th>
				<th width="200px">名称</th>
				<th width="100px">价格</th>
				<th width="150px">数量</th>
				<th width="100px">小计</th>
				<th width="100px">操作</th>
				</tr>
				</thead>
				<tbody class="tbody">
					<tr class="empty">
						<td colspan="7">你的购物车里空空如也~，快去<a href="index.html">shopping</a>吧</td>
					</tr>
					<tr>
						<td><input type="checkbox" name="ck" id="" value="" /></td>
						<td><img src="img/qEAJBBKINn6FAnZ8CwfyiK4w2DEgADs=.gif" ></td>
						<td><a href="#">大昏君</a></td>
						<td>998</td>
						<td>
							<button type="button" class="jian">-</button>
						<input type="text" name="num" value="1" class="num" readonly="readonly" />
						<button type="button" class="jia">+</button>
						</td>
						<td>998</td>
						<td class="del"><a href="javascript:void(0);" class="del">删除</a></td>
					</tr>
					<tr>
						<td><input type="checkbox" name="ck" id="" value="" /></td>
						<td><img src="img/QQ图片20210914201503.jpg" ></td>
						<td><a href="#">夜游神</a></td>
						<td>998</td>
						<td><button type="button" class="jian">-</button>
						<input type="text" name="num" value="1" readonly="readonly" class="num" />
						<button type="button" class="jia">+</button>
						</td>
						<td>10</td>
						<td><a href="javascript:void(0);" class="del">删除</a></td>
					</tr>
					<tr>
						<td><input type="checkbox" name="ck" id="" value="" /></td>
						<td><img src="img/QQ图片20210914201548.gif" ></td>
						<td><a href="#">大学渣</a></td>
						<td>998</td>
						<td>
							<button type="button" class="jian">-</button>
						<input type="text" name="num" value="1" class="num" readonly="readonly" />
						<button type="button" class="jia">+</button>
						</td>
						<td>998</td>
						<td><a href="javascript:void(0);" class="del">删除</a></td>
					</tr>
				</tbody>
				<tfoot>
					<tr class="footer">
						<td colspan="3"><a href="javascript:void(0)" class="dels">批量删除</a> </td>
						<td>总金额</td>
						<td><span id="total" class="">
							0
						</span>元</td>
						<td><button type="image" class="submit">提交订单</button></td>
					</tr>
				</tfoot>
				
			</table>
		</div>
	</body>
</html>

关于css的

.cart {
	width: 900px;
	margin: 5px auto;
}

.cart>table {
	width: 100%;
}

tbody {
	width: 900px;
}

.cart img {
	width: 144px;
	height: 144px;
	margin: 3px;
}

td {
	text-align: center;
	height: 150px;
}

.num {
	width: 25px;
	text-align: center;
}

.footer td,
th {
	height: 50px !important;
}

td,
th {
	border-bottom: 0.0625rem #ccc solid !important;
}

thead {
	background-color: #CCCCCC;
}

table {
	border: 1px #ccc solid !important;
}

#total {
	color: red;
}

.empty {
	display: none;
}

js文件

$(function() {
			//删除功能
			$(".del").on("click", function() {
						if (confirm("确定要删除吗? ")) {
							$(this).parents("tr").remove();
							}
							isAll();
							//删除之后判断购物车是否空了
							has();
						})
					//批量删除
					$(".dels").on("click", function() {
							if (confirm("确定要删除吗? ")) {
								$(" input[name=ck]").each(function(i,ch){
										if ($(ch).prop("checked")){
											$(this).parents("tr").remove();
											calculation()
											}
										})
							}
										isAll();
									//删除之后判断购物车是否空了
									has();
								})
							//全选功能
							$("#checkAll").on("click", function(){
								//先获取全选按钮的状态
								var flag = $(this).prop("checked");
								//根据全选按钮的状态设置商品选项的状态
								$("input[name=ck]").prop("checked",flag);
								calculation()
							})
							//商品选择按钮的功能
							$("input[name=ck]").on("click", isAll)

							function isAll() {
								//设置全选状态，默认为true
								var flag = true;
								//遍历所有商品选择按钮的状态，如果有一个是没选中的，
								//就设置全选按钮的状态为false
								$("input[name=ck]").each(function(i, ch) {
									if (!$(ch).prop("checked")){
										flag = false;
									}
								})
								//没有商品的时候，修改全选状态非false
								if ($(".tbody tr").length <= 1){
									flag = false;
								}
								$("#checkAll").prop("checked", flag)
								calculation()
							}
							//数量加
							$(".jia").on("click", function(){
								//获取数量元素
								var $num = $(this).prev();
								//获取数量的值
								var v = $num.val();
								//自增
								v++;
								//重新设置数量的值
								$num.val(v)
								//获取当前商品的单价
								var price = $(this).parent().prev().text();
								//计算小计金额
								var sum = price * v;
								//设置小计金额
								$(this).parent().next().text(sum.toFixed(2));
								calculation();
							})
							//数量减
							$(".jian").on("click", function() {
									var $num = $(this).next();
									var v = $num.val();
									//自减
									v--;
									//判断数量范围，最小为1
									if (v < 1) {
										v = 1;
										}
										$num.val(v)
										//获取当前商品的单价
										var price=$(this).parent().prev().text();
										//计算小计金额
										var sum=price*v;
										//设置小计金额
										$(this).parent().next().text(sum.toFixed(2));
										calculation()
									})
								//计算总金额
								function calculation() {
									var total = 0;
									//总金额跟商品是否被选中有关联
									//遍历所有选择按钮，查石状态是否被选中
									$("input[name=ck]").each(function(i, ck) {
										if ($(ck).prop("checked")) {
											//如果被选中，获取相应的小计的值
											var sj = $(ck).parents("tr").find("td").eq(5).text()
											// alert(sj);
											total += parseFloat(sj);
											// alert(total);
										}
									})
									$("#total").text(total.toFixed(2))
								}
								//判断购物车中是否有商品
								function has(){
									if($(".tbody tr").length > 1){
										$(".empty").hide();
										$("#checkA11").prop("disabled",false);
									}else{
										$(".empty").show();
										$("#checkA11").prop("disabled",true)
									}
								}
								//页面加载完，先判断是否有商品
								has();
							})

图片自选，jquer文件我上传的资源有。
以下为结果
在这里插入图片描述

原文链接：https://blog.csdn.net/kiss_scarecrow/article/details/120308018