jquery购物车-CSDN博客

本文链接：https://blog.csdn.net/m0_46279754/article/details/122924269

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="01.css" />
	</head>
	<body>
		<div id="container">
			<div id="logo">
				<img src="img/sh.jpg">我的购物车
			</div>
			<div id="cart">
				<table id="table" cellpadding="0" cellspacing="0">
					<thead>
						<tr>
							<th width="10%"><input type="checkbox" id="checkbox" /></th>
							<th width="10%">序号</th>
							<th width="50%">商品名称</th>
							<th width="10%">单价</th>
							<th width="10%">数量</th>
							<th width="10%">操作</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td class="td_1">
								<input type="checkbox"  class="checkbox" />
							</td>
							<td>1</td>
							<td class="font">
								<img src="img/p_1.jpg">
								【果美妙】澳洲脐橙10个装包邮进口新鲜水果澳大利亚甜橙当季橙子</td>
							<td class="jiage">￥<span class="price">49.90</span></td>
							<td class="danjia">
								<input type="button" id="btn" class="delBtn" value="-" />
								<input class="num" value="0" />
								<input type="button" id="btn" class="addBtn" value="+" />
							</td>
							<td><a href="#">删除</a></td>
						</tr>
						<tr>
							<td class="td_1"><input type="checkbox" class="checkbox" /></td>
							<td>2</td>
							<td class="font">
								<img src="img/p_2.jpg">
								陕西洛川苹果水果新鲜正宗红富士10斤批发包邮当季脆甜水果一整箱</td>
							<td>￥<span class="price">53.90</span></td>
							<td class="danjia">
								<input type="button" id="btn" class="delBtn" value="-" />
								<input class="num" value="0" />
								<input type="button" id="btn" class="addBtn" value="+" />
							</td>
							<td><a href="#">删除</a></td>
						</tr>
						<tr>
							<td class="td_1"><input type="checkbox" class="checkbox" /></td>
							<td>3</td>
							<td class="font">
								<img src="img/p_3.jpg">
								花牛苹果蛇果5斤包邮新鲜甘肃天水礼县刮泥大红星发水果特产</td>
							<td>￥<span class="price">88.00</span></td>
							<td class="danjia">
								<input type="button" id="btn" class="delBtn" value="-" />
								<input class="num" value="0" />
								<input type="button" id="btn" class="addBtn" value="+" />
							</td>
							<td><a href="#">删除</a></td>
						</tr>
						<tr>
							<td class="td_1"><input type="checkbox" class="checkbox" /></td>
							<td>4</td>
							<td class="font">
								<img src="img/p_4.jpg">
								【Zespri佳沛新西兰绿奇异果3.3kg原箱(22-25个)猕猴桃水果新鲜新鲜</td>
							<td>￥<span class="price">129.90</span></td>
							<td id="danjia">
								<input type="button" id="btn" class="delBtn" value="-" />
								<input class="num" value="0" />
								<input type="button" id="btn" class="addBtn" value="+" />
							</td>
							<td><a href="#">删除</a></td>
						</tr>
						<tr id="footer">
							<td colspan="6">总共<span id="zongjia">0</span>元<br>
								<img src="img/js.jpg"></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</body>
	<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="./02.js" type="text/javascript" charset="utf-8"></script>
</html>

* {
	padding: 0;
	margin: 0;
}

#container {
	width: 1200px;
	margin: 0 auto;
	height: 400px;
	border: 1px solid #eeeeee;
}

#container #logo {
	align-items: center;
	color: #67A654;
	display: flex;
	height: 50px;
	background-color: #dcffbd;
}

#container #logo img {
	height: 50px;
}

#cart #table {
	height: 300px;
	width: 100%;
}

#cart #table thead tr {
	height: 40px;
	font-size: 0.8em;
	color: white;
	background-image: url(img/shopt.jpg);
}

#cart #table tbody tr {
	text-align: center;
}

#cart #table tbody tr td {
	border-bottom: 1px dashed #eeeeee;
}

#cart #table tbody tr td #btn {
	width: 20px;
}

#cart #table tbody tr td .num {
	width: 40px;
}

#danjia {
	margin-left: 15px;
}

#cart #table tbody tr td img {
	height: 65px;
}

#cart #table tbody tr td:nth-child(3) {
	display: flex;
	align-items: center;
}

#cart #table tbody
#footer {
	text-align: right;
	width: 100%;
}
#footer td{
	padding-right: 30px;
}
#cart #table tbody #footer img {
	height: 20px;
}
#cart #table tbody tr .num {
	text-align: center;
}

/* 全选 全不选 */
$('#checkbox').click(function() {
	/* 获取复选框的是否选中 */
	var flag = $(this).is(":checked");
	$('#table tbody :checkbox').prop("checked", flag)
	if (flag) {
		getSum();
	} else {
		$("#zongjia").text(0)
	}
})
$('#table tbody :checkbox').click(function() {
	getSum();
})


/* 判断是否全选 */
function chooseAll() {
	var k = 0;
	$('.td_1').children().each(function(i, item) {
		if ($(item).is(":checked")) {
			k++;
		}
	})
	console.log(k);
	console.log($('.td_1').size());
	if (k == $('.td_1').size()) {
		$('#checkbox').prop("checked", true);
	} else {
		$('#checkbox').prop("checked", false);
	}

	if (!($('#checkbox').is("checked"))) {
		// getSum()
	}
}


/* 每点击一次判断是否被全选 */
$('.td_1').children().click(function() {
	getSum()
	chooseAll();
})


function getSum() {
	var sum = 0;
	/* 拿到每个的数量 */

	var num = $('#table tbody tr .td_1 :checked ').each(function(i, item) {
		// var num = parseInt($(item).val())
		// var a = $(item).parent().prev().children().text();
		// var price = parseInt(a)
		// var sde = num * price;
		// sum += sde;
		var price = $(item).parent().next().next().next().children().text();
		var num = $(item).parent().next().next().next().next().find('.num').val()
		sum += price * num;
	});
	/* 拿到每个的单价*/
	$("#zongjia").text(parseFloat(sum).toFixed(2))

}
// var$('.td_1').next().next().ne{}xt().next().find('.num')
$('.num').change(function() {

	var num = $(this).val();
	if(num>0){
		getSum()
	}else{
		alert("aefa")
	}
})			

/* 删除 */
$('#table tbody tr').find('a').click(function() {
	$(this).parent().parent().remove();
	getSum();
});

/* 增加 */
$('.addBtn').click(function() {
	var oldNum = $(this).prev().val();
	var newNum = parseInt(oldNum) + 1;
	$(this).prev().val(newNum);
	getSum()
})

/* 减少 */
$('.delBtn').click(function() {
	var oldNum = $(this).next().val();
	var newNum = parseInt(oldNum) - 1;

	if (parseInt(oldNum) > 0) {
		newNum = parseInt(oldNum) - 1;
		$(this).next().val(newNum);
	}
	getSum();
})