HTML购物车示例（勾选、删除、添加和结算功能）

最新推荐文章于 2024-03-18 23:01:18 发布

园游会永不打烊.

最新推荐文章于 2024-03-18 23:01:18 发布

阅读量1.1w

点赞数 73

分类专栏：笔记文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/qq_35230125/article/details/130497757

版权

笔记专栏收录该内容

152 篇文章

订阅专栏

这是一个HTML购物车的示例，包含了勾选、删除、添加商品和使用PHP处理的结算功能。用户可以选择商品，调整数量，并能获取选中商品的ID以进行结算操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下是一个简单的HTML购物车示例，包含勾选、删除、添加和结算功能。结算功能使用PHP实现，可以获取选中商品的ID。

在这里插入图片描述

以下是一个简单的HTML购物车示例，包含勾选、删除、添加和结算功能。结算功能使用PHP实现，可以获取选中商品的ID`以下是一个简单的HTML购物车示例，包含勾选、删除、添加和结算功能。结算功能使用PHP实现，可以获取选中商品的ID。

<!DOCTYPE html>
<html>
<head>
      <link rel="stylesheet" href="css/style.css" />
	<title>购物车</title>
	<style>
		table {
			border-collapse: collapse;
			width: 100%;
		}

		th, td {
			text-align: left;
			padding: 8px;
			border-bottom: 1px solid #ddd;
		}

		tr:hover {
			background-color: #f5f5f5;
		}

		.check {
			width: 20px;
		}

		.delete {
			color: red;
			cursor: pointer;
		}

		.total {
			font-weight: bold;
			text-align: right;
		}

		#checkout {
			margin-top: 20px;
			text-align: right;
		}
	</style>
</head>
<body>
	<h1>购物车</h1>
	<table>
		<thead>
			<tr>
				<th class="check"></th>
				<th>商品名称</th>
				<th>价格</th>
				<th>数量</th>
				<th>小计</th>
				<th class="delete"></th>
			</tr>
		</thead>
		<tbody>
			<tr class="item-row" data-id="1">
				<td class="check"><input type="checkbox" name="item[]" value="1"></td>
				<td>商品1</td>
				<td>10.00</td>
				<td><input type="number" name="quantity[]" value="1"></td>
				<td class="subtotal">10.00</td>
				<td class="delete">X</td>
			</tr>
			<tr class="item-row" data-id="2">
				<td class="check"><input type="checkbox" name="item[]" value="2"></td>
				<td>商品2</td>
				<td>20.00</td>
				<td><input type="number" name="quantity[]" value="1"></td>
				<td class="subtotal">20.00</td>
				<td class="delete">X</td>
			</tr>
			<tr class="item-row" data-id="3">
				<td class="check"><input type="checkbox" name="item[]" value="3"></td>
				<td>商品3</td>
				<td>30.00</td>
				<td><input type="number" name="quantity[]" value="1"></td>
				<td class="subtotal">30.00</td>
				<td class="delete">X</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="4" class="total">总计：</td>
				<td class="total" id="total">0.00</td>
				<td></td>
			</tr>
		</tfoot>
	</table>
	<div id="checkout">
		<button onclick="checkout()">结算</button>
	</div>

	<script>
		// 计算小计和总计
		function updateSubtotal() {
			var rows = document.querySelectorAll('.item-row');
			var total = 0;
			for (var i = 0; i < rows.length; i++) {
				var row = rows[i];
				var price = parseFloat(row.querySelector('td:nth-child(3)').textContent);
				var quantity = parseInt(row.querySelector('input[name="quantity[]"]').value);
				var subtotal = price * quantity;
				row.querySelector('.subtotal').textContent = subtotal.toFixed(2);
				total += subtotal;
			}
			document.querySelector('#total').textContent = total.toFixed(2);
		}

		// 删除商品
		function deleteItem() {
			var row = this.parentNode;
			row.parentNode.removeChild(row);
			updateSubtotal();
		}

		// 添加商品
		function addItem() {
			var table = document.querySelector('table');
			var row = table.insertRow(-1);
			row.classList.add('item-row');
			row.dataset.id = Date.now(); // 生成一个随机ID
			row.innerHTML = `
				<td class="check"><input type="checkbox" name="item[]" value="${row.dataset.id}"></td>
				<td><input type="text" name="name[]"></td>
				<td><input type="number" name="price[]" step="0.01"></td>
				<td><input type="number" name="quantity[]" value="1"></td>
				<td class="subtotal">0.00</td>
				<td class="delete">X</td>
			`;
			row.querySelector('.delete').addEventListener('click', deleteItem);
			row.querySelector('input[name="quantity[]"]').addEventListener('input', updateSubtotal);
			row.querySelector('input[name="price[]"]').addEventListener('input', updateSubtotal);
		}

		// 结算选中的商品
		function checkout() {
			var items = document.querySelectorAll('input[name="item[]"]:checked');
			var ids = [];
			for (var i = 0; i < items.length; i++) {
				ids.push(items[i].value);
			}
			if (ids.length > 0) {
				window.location.href = 'checkout.php?ids=' + ids.join(',');
			} else {
				alert('请选择要结算的商品');
			}
		}

		// 绑定事件
		var deleteButtons = document.querySelectorAll('.delete');
		for (var i = 0; i < deleteButtons.length; i++) {
			deleteButtons[i].addEventListener('click', deleteItem);
		}
		var addBtn = document.querySelector('#add');
		addBtn.addEventListener('click', addItem);
		var quantityInputs = document.querySelectorAll('input[name="quantity[]"]');
		for (var i = 0; i < quantityInputs.length; i++) {
			quantityInputs[i].addEventListener('input', updateSubtotal);
		}
		var priceInputs = document.querySelectorAll('input[name="price[]"]');
		for (var i = 0; i < priceInputs.length; i++) {
			priceInputs[i].addEventListener('input', updateSubtotal);
		}
	</script>
</body>
</html>
`