以下是一个简单的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>
`
