使用getElementById实现Checkbox全选/取消全选功能失效且无报错问题排查

嘿，我帮你瞅了瞅这段代码，问题主要出在两个关键地方，难怪没效果还没报错：

• HTML里重复使用ID，导致获取不到所有目标复选框
  你给每个子复选框都设置了相同的id="trainingOverview1"，但DOM规范里ID是元素的唯一标识，document.getElementById()只能拿到第一个匹配ID的元素，后面的复选框根本获取不到。这时候变量checkboxes是单个DOM元素，不是数组，checkboxes.length会变成undefined，循环条件i < undefined会直接跳过整个循环，自然看不到任何效果，而且这种情况JS不会抛出错误，所以你没收到报错提示。

• JS变量未声明，存在潜在风险
  代码里的checkboxes没有用var/let/const声明，会自动变成全局变量，虽然这不是这次功能失效的直接原因，但后续容易引发变量冲突问题，建议养成声明变量的习惯。

修正后的代码示例 #

先调整HTML（把重复的ID换成name属性）：

Select Unselect<input type="checkbox" onclick="selectall(this,'trainingOverview1')"> <br> 
checkbox 1 <input name="trainingOverview1" type="checkbox" class="" ><br> 
checkbox 2 <input name="trainingOverview1" type="checkbox" class="" ><br>

再修改JavaScript（改用getElementsByName获取所有目标复选框，加上变量声明）：

function selectall(source, courseName) { 
  const checkboxes = document.getElementsByName(courseName); 
  for (var i = 0, n = checkboxes.length; i < n; i++) { 
    checkboxes[i].checked = source.checked; 
  } 
}

如果想更灵活，也可以用querySelectorAll配合class选择器：
把HTML里的子复选框改成class="trainingOverview1"，然后JS写成：

function selectall(source, className) { 
  const checkboxes = document.querySelectorAll('.' + className); 
  checkboxes.forEach(checkbox => checkbox.checked = source.checked);
}

内容的提问来源于stack exchange，提问作者TSCAmerica.com