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

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

      
	
	
		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;
		}
	


	
购物车
	

		

			

				

				
商品名称
				
价格
				
数量
				
小计
				

			
		
		

			

				

				
商品1
				
10.00
				

				
10.00
				
X
			
			

				

				
商品2
				
20.00
				

				
20.00
				
X
			
			

				

				
商品3
				
30.00
				

				
30.00
				
X
			
		
		

			

				
总计：
				
0.00
				

			
		
	
	
		结算
	

	
		// 计算小计和总计
		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 = `
				<input type="checkbox" name="item[]" value="${row.dataset.id}">
				
				
				
				0.00
				X
			`;
			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);
		}
	


`