Correcting teacher:天蓬老师
Correction status:qualified
Teacher's comments:以后工作中, 还是要慢慢适应箭头函数, 毕竟现在很多案例全用它
给购物车加上选择时自动计算功能,分为两种情况:全选改变和单个商品选择改变。
// 全选复选框
const checkAll = document.querySelector("#check-all");
// 获取每行的复选框
const checkItems = document.querySelectorAll(".item");
// 获取全部数量框
const numInput = document.querySelectorAll('input[type="number"]');
checkAll.onchange = (ev) => {
checkItems.forEach((item) => {
item.checked = ev.target.checked;
if (ev.target.checked) {
numInput.forEach((num) => (num.value = 1));
} else {
numInput.forEach((num) => (num.value = 0));
}
// 调用自动运算函数
autoCallculate();
});
};
// 每一行的复选框状态发生变化时,检查是否全部选中,修改对应数量框的数值
checkItems.forEach(function (item, index) {
item.onchange = function (ev) {
checkAll.checked = [...checkItems].every(function (item) {
return item.checked;
});
if (ev.target.checked) {
// 恢复选中,商品数量变为1
numInput[index].value = 1;
} else {
// 取消选中时,商品数量变为0
numInput[index].value = 0;
}
// 调用自动运算函数
autoCallculate();
};
});