Node.js+EJS项目实现勾选复选框统计金额总和（无jQuery）

我帮你排查了代码里的几个关键问题，现在把修复后的完整代码给你，同时解释每个修改点，确保功能正常运行：

修复后的完整EJS视图代码 #

<!DOCTYPE HTML>
<HTML>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="windows-1252">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script>
// 全选/取消全选功能，同时触发总和计算
function toggle(source) {
  const checkboxes = document.querySelectorAll('input[name="selction"]');
  for (let i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i] !== source) {
      checkboxes[i].checked = source.checked;
    }
  }
  // 全选后立即更新总和
  getSelected();
}

// 计算选中行的Amount总和
function getSelected() {
  const table = document.getElementById("t1");
  let sumVal = 0;
  // 获取所有name为selction的复选框
  const checkBoxes = table.querySelectorAll('input[name="selction"]');
  
  checkBoxes.forEach(checkbox => {
    if (checkbox.checked) {
      // 获取当前复选框所在的行
      const row = checkbox.closest('tr');
      // 获取Amount列的数值（cells[3]对应第4列，索引从0开始）
      const amount = parseInt(row.cells[3].textContent.trim());
      // 累加总和，处理NaN情况（如果数值无效则加0）
      sumVal += isNaN(amount) ? 0 : amount;
    }
  });
  
  // 更新显示总和的元素
  document.getElementById("val").textContent = sumVal;
}
</script>
<body>
<h1>Payment Entry</h1>
<div class="w3-container w3-border-top w3-border-bottom">
<table class="w3-table-all w3-hoverable">
<thead>
<tr class="w3-hover-orange">
<th><input type="checkbox" onclick="toggle(this);" /></th>
<th>Truck No</th>
<th>Cr Date</th>
<th>Amount</th>
<th>Collected By</th>
</tr>
</thead>
<tbody id="t1">
<tr class="w3-hover-yellow">
<!-- 去掉重复的id，保留name属性 -->
<td><input type="checkbox" onclick="getSelected()" name="selction"></td>
<td>data</td>
<td>data</td>
<td>10000</td>
<td>data</td>
</tr>
<tr class="w3-hover-yellow">
<td><input type="checkbox" onclick="getSelected()" name="selction"></td>
<td>data</td>
<td>data</td>
<td>20000</td>
<td>data</td>
</tr>
<tr class="w3-hover-yellow">
<td><input type="checkbox" onclick="getSelected()" name="selction"></td>
<td>data</td>
<td>data</td>
<td>30000</td>
<td>data</td>
</tr>
</tbody>
<tfoot>
<tr class="w3-hover-orange">
<td>Total</td>
<td></td>
<td></td>
<!-- 修复标签使用与闭合方式 -->
<td><span id="val">0</span></td>
<td></td>
</tfoot>
</table>
</div>
</body>
</HTML>

关键修改点说明 #

• 移除重复ID：把所有复选框的id="selction"去掉，只保留name="selction"——HTML中ID必须唯一，重复ID会直接导致DOM选择逻辑出错。
• 修正DOM选择方式：用table.querySelectorAll('input[name="selction"]')获取表格内所有目标复选框，替代原来错误的table.getElementById调用（getElementById是document专属方法，不能在元素节点上调用）。
• 修复行单元格访问：把row.cell[3]改成row.cells[3]（DOM中行的单元格集合是复数形式的cells属性），同时用textContent替代innerHTML，避免潜在的HTML注入风险，也更适合读取纯文本内容。
• 处理数值异常：增加isNaN(amount) ? 0 : amount判断，避免非数值内容导致总和变成NaN。
• 全选后触发计算：在toggle函数最后调用getSelected()，确保全选/取消全选时总和能实时同步更新。
• 变量声明优化：用let替代var避免变量提升带来的意外问题，同时简化sumVal的初始化逻辑。
• 修复标签使用：把<label id= "val"/>改成<span id="val">0</span>，label标签用于关联表单元素，不适合用来显示纯文本；同时添加初始值0，让页面加载时就有合理的显示。

现在你勾选任意复选框或者点击全选按钮，总和都会实时更新啦！

内容的提问来源于stack exchange，提问作者rushirajsinh rana