批改状态:合格
老师批语:以后工作中, 还是要慢慢适应箭头函数, 毕竟现在很多案例全用它
给购物车加上选择时自动计算功能,分为两种情况:全选改变和单个商品选择改变。
// 全选复选框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) {// 恢复选中,商品数量变为1numInput[index].value = 1;} else {// 取消选中时,商品数量变为0numInput[index].value = 0;}// 调用自动运算函数autoCallculate();};});
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号