这是我的shoppingcar.js文件：// 页面加载完成后执行a函数
window.onload = a;
// a函数，页面加载完成后执行的函数
function a() {
// 获取所有
全选复选框
var selectall = document.querySelectorAll(".selectAll");
// 获取所有单选复选框
var checkbox = document.querySelectorAll("[name=check]");
// 为每个
全选复选框添加点击事件监听器
selectall.forEach(sa => sa.onclick = e => {
// 遍历所有
全选复选框，将它们的状态设置为点击的复选框的状态
selectall.forEach(sa => sa.checked = e.target.checked);
// 遍历所有单选复选框，将它们的状态设置为点击的复选框的状态
checkbox.forEach(cb => cb.checked = e.target.checked);
// 调用total函数计算
总价
total();
});
// 为每个单选复选框添加点击事件监听器
checkbox.forEach(cb => cb.onclick = checkAll);
// 获取所有数量输入框
var number = document.querySelectorAll("[type=number]");
// 为每个数量输入框添加改变事件监听器
number.forEach(nb => nb.onchange = e => {
// 获取价格和数量
var price = e.target.parentNode.parentNode.querySelector(".price").innerText;
var number = e.target.value;
// 计算小计
并设置到页面上
e.target.parentNode.parentNode.querySelector(".subtotal").innerText = Number(price * number).toFixed(2);
// 调用total函数计算
总价
total();
});
// 加载
商品数据
load();
// 为每个删除
按钮添加点击事件监听器
document.querySelectorAll(".del").forEach(de => {
de.onclick = () => {
// 获取父元素
var parent = de.parentNode.parentNode.parentNode;
// 获取父元素的父元素
var parent1 = de.parentNode.parentNode;
// 确认是否删除
if (confirm("确认删除")) {
// 移除父元素
parent.removeChild(parent1);
}
// 调用total函数计算
总价
total();
};
});
// 为删除选中
商品按钮添加点击事件监听器
document.querySelector("#delcheck").onclick = () => {
// 获取选中的
商品数量
var a = confirm("删除选中的
商品");
// 遍历所有单选复选框
document.querySelectorAll("input[name=check]").forEach(de => {
// 如果复选框被选中且确认删除，则移除父元素
if (de.checked && a) {
var parent = de.parentNode.parentNode.parentNode;
var parent1 = de.parentNode.parentNode;
if (confirm("确认删除？")) {
parent.removeChild(parent1);
}
}
});
};
// 调用total函数计算
总价
total();
}
// 检查所有复选框是否都被选中
function checkAll() {
// 获取所有
全选复选框
var selectall = document.querySelectorAll(".selectAll");
// 获取所有单选复选框
var checkbox = document.querySelectorAll("[name=check]");
// 获取单选复选框的总数
var total = checkbox.length;
// 获取选中的单选复选框的数量
var count = 0;
// 遍历单选复选框
checkbox.forEach(cb => {
// 如果复选框被选中，计数器加1
if (cb.checked) count++;
});
// 如果所有单选复选框都被选中，将
全选复选框也设置为选中状态
if (count === total) {
selectall.forEach(sa => sa.checked = true);
} else {
// 否则
selectall.forEach(sa => sa.checked = false);
}
}
// 计算
总价
function total() {
// 获取所有
商品项
var items = document.querySelectorAll(".item");
// 初始化
总价
var sum = 0;
// 遍历
商品项
for (var item of items) {
// 如果单选复选框被选中
if (item.querySelector("[name=check]").checked) {
// 累加小计到
总价
sum += Number(item.querySelector(".subtotal").innerText);
}
}
// 设置
总价到页面上
document.querySelector("#totalprice").innerText = sum.toFixed(2);
}
// 异步加载
商品数据
function load() {
// 使用fetch API异步获取JSON数据
fetch("./js/products.json").then(resp => resp.json()).then(res => {
//
输出商品数据到控制台
console.log(res);
// 如果数据加载成功
if (res.status === "success") {
//
输出商品数据到控制台
console.log(res.data);
// 获取
商品列表容器
const dom = document.querySelector(".productsBox");
// 初始化
HTML字符串
let
html = "";
// 遍历
商品数据
for (const p of res.data) {
// 构建
商品HTML并添加到容器
html += `<div class="product">
<img src="img/${p.img}" height="100">
<p>${p.name}</p>
<div>¥${p.price}</div>
<button>加入购物车</button>
</div>`;
}
// 将
HTML设置为
商品列表容器的inner
HTML
dom.inner
HTML =
html;
// 获取所有
按钮
const btns = dom.querySelectorAll("button");
// 为每个
按钮添加点击事件监听器
btns.forEach((b, index) => {
b.onclick = () => {
// 添加
商品到购物车
addToCart(res.data[index]);
};
});
}
}).catch(e => {
// 处理错误
console.error("加载失败，请重试");
});
}
// 添加
商品到购物车
function addToCart(product) {
// 获取所有
商品项
const items = document.querySelectorAll(".item");
// 遍历
商品项
for (const item of items) {
// 如果
商品名称与当前
商品相同
if (item.querySelector("div:nth-child(3)").inner
HTML.trim() === product.name) {
// 获取数量输入框
const number = item.querySelector("[type=number]");
// 增加数量
number.value = Number(number.value) + 1;
// 触发改变事件
number.dispatchEvent(new Event("change"));
// 返回，避免继续添加相同的
商品
return;
}
}
// 构建新的
商品HTML并添加到购物车列表
let
html = `
<div class="item">
<div><input type="checkbox" name="check" /></div>
<div><img src="img/${product.img}" height="100" /></div>
<div>${product.name}</div>
<div>¥<span class="price">${product.price}</span></div>
<div><input type="number" value="1" min="1" /></div>
<div>¥<span class="subtotal">${product.price}</span></div>
<div><a href="#" class="del">删除</a></div>
</div>`;
// 将
HTML添加到购物车列表
document.querySelector("#listBox").inner
HTML +=
html;
// 重新绑定事件监听器
a();
}
，这是我的index.
html:<!DOCTYPE
html>
<
html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>京东商城 - 购物车</title>
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<header></header>
<div class="content">
<div class="t-head"><h4>全部
商品</h4></div>
<div class="sct">
<div class="thead">
<div><input type="checkbox" class="selectAll" /></div>
<div>
全选</div>
<div>
商品</div>
<div>单价</div>
<div>数量</div>
<div>小计</div>
<div>操作</div>
</div>
<div id="listBox">
<div class="item">
<div><input type="checkbox" name="check" /></div>
<div><img src="img/product
5.jpg" height="100" /></div>
<div>光明 纯牛奶2
50mL*24盒</div>
<div>¥<span class="price">
58.80</span></div>
<div><input type="number" value="1" min="1" /></div>
<div>¥<span class="subtotal">
58.80</span></div>
<div><a href="#" class="del">删除</a></div>
</div>
<div class="item">
<div><input type="checkbox" name="check" /></div>
<div><img src="img/product
5.jpg" height="100" /></div>
<div>光明 纯牛奶2
50mL*24盒</div>
<div>¥<span class="price">
58.80</span></div>
<div><input type="number" value="1" min="1" /></div>
<div>¥<span class="subtotal">
58.80</span></div>
<div><a href="#" class="del">删除</a></div>
</div>
<div class="item">
<div><input type="checkbox" name="check" /></div>
<div><img src="img/product
5.jpg" height="100" /></div>
<div>光明 纯牛奶2
50mL*24盒</div>
<div>¥<span class="price">
58.80</span></div>
<div><input type="number" value="1" min="1" /></div>
<div>¥<span class="subtotal">
58.80</span></div>
<div><a href="#" class="del">删除</a></div>
</div>
<div class="item">
<div><input type="checkbox" name="check"></div>
<div><img src="img/product1.jpg" height="100"></div>
<div>新品华为笔记本MateBook D 14/1
5 轻薄本商务办公本笔记本电脑学生 D1
5i
5-10210U 16
512G独显灰</div>
<div>¥<span class="price">
5239.00</span></div>
<div><input type="number" value="1" min="1"></div>
<div>¥<span class="subtotal">
5239.00</span></div>
<div><a href="#" class="del">删除</a></div>
</div>
</div>
<div class="countBox">
<div><input type="checkbox" class="selectAll" /></div>
<div>
全选 <a href="#" id="delcheck">删除选中的
商品</a></div>
<div>
<span class="gray">
总价:</span> ￥<span id="totalprice">0.00</span>
</div>
<div>去结算</div>
</div>
</div>
</div>
<div class="p-head"><h
5>猜你喜欢</h
5></div>
<div class="productsBox">
<div class="product">
<img src="img/product1.jpg" height="100" />
<p>
新品华为笔记本MateBook D 14/1
5 轻薄本商务办公本笔记本电脑学生 D1
5
i
5-10210U 16
512G独显灰
</p>
<div>¥
5239.00</div>
<button class="add-to-cart">
<i class="fa fa-shopping-cart" aria-hidden="true"></i> 加入购物车
</button>
</div>
<div class="product">
<img src="img/product1.jpg" height="100" />
<p>
新品华为笔记本MateBook D 14/1
5 轻薄本商务办公本笔记本电脑学生 D1
5
i
5-10210U 16
512G独显灰
</p>
<div>¥
5239.00</div>
<button>
<i class="fa fa-shopping-cart" aria-hidden="true"></i> 加入购物车
</button>
</div>
</div>
<footer></footer>
<script src="js/shoppingcar.js"></script>
</body>
</
html>,这是我的productsjson{
"status": "success",
"data": [
{
"name": "新品华为笔记本MateBook D 14/1
5 轻薄本商务办公本笔记本电脑学生 D1
5i
5-10210U 16
512G独显灰",
"img": "product1.jpg",
"price": "
5239.00"
},
{
"name": "新款Huawei/华为折叠手机mates xs
5g版大屏双屏全面屏双面屏官方旗舰店对折手机可折叠屏 Mate XS折叠",
"img": "product2.jpg",
"price": "20980.00"
},
{
"name": "华为智慧屏V
55i-A
55英寸 HEGE-
550 4K超薄全面屏液晶电视机 多方视频通话AI升降摄像头 4GB+64GB 星际黑",
"img": "product3.jpg",
"price": "3999.00"
},
{
"name": "华为荣耀智能手表WATCH Magic运动男女2Pro手环定位NFC支付陶瓷版（流沙杏）",
"img": "product4.jpg",
"price": "699.00"
}
]
}
,请详细注释shoppingcar.js中每行代码的意思
本文展示了如何在HTML5中实现全选按钮功能，通过点击全选按钮可以选中或取消所有商品复选框。同时，还介绍了如何编写getSum()函数，该函数用于计算选中商品的总价，并将结果显示在页面的span元素中。
最低0.47元/天 解锁文章
扫一扫
1607
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
