一个简单的HTML和JavaScript示例来创建一个购物车全选菜单。
以下是一个基本示例：
```html
<!DOCTYPE html>
<html>
<head>
<title>购物车</title>
</head>
<body>
<h1>购物车</h1>
<input type="checkbox" id="selectAll"> 全选
<br>
<input type="checkbox" class="item"> 商品1 - $10
<input type="checkbox" class="item"> 商品2 - $20
<input type="checkbox" class="item"> 商品3 - $30
<br>
<button id="checkout">结算</button>
<script>
// 获取全选复选框和所有商品复选框
var selectAllCheckbox = document.getElementById("selectAll");
var itemCheckboxes = document.querySelectorAll(".item");
// 添加全选复选框的事件监听器
selectAllCheckbox.addEventListener("change", function () {
var isChecked = selectAllCheckbox.checked;
itemCheckboxes.forEach(function (checkbox) {
checkbox.checked = isChecked;
});
});
// 添加结算按钮的事件监听器
var checkoutButton = document.getElementById("checkout");
checkoutButton.addEventListener("click", function () {
var selectedItems = Array.from(itemCheckboxes)
.filter(function (checkbox) {
return checkbox.checked;
})
.map(function (checkbox) {
return checkbox.nextSibling.nodeValue.trim();
});
if (selectedItems.length > 0) {
alert("已选择以下商品:\n" + selectedItems.join("\n"));
} else {
alert("购物车为空");
}
});
</script>
</body>
</html>
```
这个示例创建了一个包含全选复选框、商品复选框和结算按钮的购物车页面。用户可以单击全选框来选择或取消选择所有商品，然后单击结算按钮以查看所选商品。请注意，这只是一个简单的示例。
（注，由AI生成）
1388
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
