<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车实战</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table>
<caption>
我得购物车
</caption>
<thead>
<th><input type="checkbox" name="checkall" id="check-all"><label for="">全选</label></th>
<th>图片</th>
<th>品名</th>
<th>单位</th>
<th>单价/元</th>
<th>数量</th>
<th>金额/元</th>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="item" class="item" value="SN-1010" checked /></td>
<td>
<a href=""><img src="images1/p1.png" alt=""></a>
</td>
<td>JavaScript权威指南(第七版)</td>
<td>本</td>
<td class="price">100</td>
<td><input type="number" min="1" value="1"></td>
<td class="amount">0</td>
</tr>
<tr>
<td>
<input type="checkbox" name="item" class="item" value="SN-1020" checked />
</td>
<td>
<a href=""><img src="images1/p2.png" alt=""></a>
</td>
<td>JavaScript权威指南(第七版)</td>
<td>本</td>
<td class="price">100</td>
<td><input type="number" min="1" value="1" ></td>
<td class="amount">0</td>
</tr>
<tr>
<td>
<input type="checkbox" name="item" class="item" value="SN-1030" checked />
</td>
<td>
<a href=""><img src="images1/p3.png" alt=""></a>
</td>
<td>JavaScript权威指南(第七版)</td>
<td>本</td>
<td class="price">100</td>
<td><input type="number" min="1" value="1"></td>
<td class="amount">0</td>
</tr>
<tr>
<td>
<input type="checkbox" name="item" class="item" value="SN-1040" checked />
</td>
<td>
<a href=""><img src="images1/p4.png" alt=""></a>
</td>
<td>JavaScript权威指南(第七版)</td>
<td>本</td>
<td class="price">100</td>
<td><input type="number" min="1" value="1"></td>
<td class="amount">0</td>
</tr>
<tr>
<td>
<input type="checkbox" name="item" class="item" value="SN-1050" checked />
</td>
<td>
<a href=""><img src="images1/p5.png" alt=""></a>
</td>
<td>JavaScript权威指南(第七版)</td>
<td>本</td>
<td class="price">100</td>
<td><input type="number" min="1" value="1"></td>
<td class="amount">0</td>
</tr>
</tbody>
<tfoot>
<td colspan="5">总计</td>
<td id="sum">0</td>
<td id="total-amount">0</td>
</tfoot>
</table>
<div style="width: 90%; margin: 10px auto">
<button style="float: right; width: 100px">结算</button>
</div>
<script src="cart2.js"></script>
</body>
</html>
const checkAll = document.querySelector("#check-all");
const checkItems = document.getElementsByName("item");
document.querySelector("#check-all").onchange = ev => checkItems.forEach(item => (item.checked = ev.target.checked));
checkItems.forEach(item => (item.onchange = () => (checkAll.checked = [...checkItems].every(item => item.checked))));
// --------------------------------------------------------------------------------------------------------------------
const numInput = document.querySelectorAll('input[type="number"]');
console.log(numInput);
numInput.forEach(input => (input.onchange = autoCalculate));
window.onload = autoCalculate;
function autoCalculate() {
const numbers = document.querySelectorAll('input[type="number"]');
console.log(numbers);
const numArr = [...numbers].map(num => num.value * 1);
console.log(numArr);
const prices = document.querySelectorAll("tbody .price");
console.log(prices);
const priceArr = [...prices].map(price => price.textContent * 1);
console.log(numArr, priceArr);
const amountArr = [priceArr, numArr].reduce((prev, curr) => prev.map((item, key) => item * curr[key]));
console.log(amountArr);
// let sum = numArr.reduce((prev, curr) => prev + curr);
// let total = amountArr.reduce((prev, curr) => prev + curr);
浙公网安备 33010602011771号