纯JS实现带复选框表格样式异常：首个复选框点击无颜色变化

我看了你的代码，发现两个关键问题导致了首行复选框点击时颜色不生效的情况，咱们一步步来修复：

问题分析 #

1. 循环变量冲突：你在外部循环用了var i，内部清除行样式的循环也用了var i。由于var是函数级作用域，内部循环的i会直接覆盖外部循环的变量。当处理第一个复选框（外部循环i=0）时，内部循环执行完后，i会变成表格行的总数，这个数值大概率大于复选框的数量len，导致外部循环直接终止，后续的样式设置逻辑没有正确执行。

2. 样式设置逻辑混乱：你在循环每个复选框时，都会反复修改当前点击行的样式。如果最后一个循环的复选框是未选中状态，会把之前设置好的行样式清空，这也可能导致首行样式被意外覆盖。

修复后的代码 #

function valid(chk) {
  var trckk = document.getElementsByTagName('tr');
  var parent = chk.parentNode.parentNode;
  var chkcomite = document.getElementsByName('idcom');
  var len = chkcomite.length;

  // 先清除所有行的样式
  for(var j = 0; j < trckk.length; j++){
    trckk[j].style.background = '';
    trckk[j].style.color = '';
  }

  // 如果当前复选框被选中，取消其他复选框的选中状态
  if(chk.checked) {
    for(var i = 0; i < len; i++){
      if(chkcomite[i] !== chk){
        chkcomite[i].checked = false;
      }
    }
    // 设置当前行的高亮样式
    parent.style.background = '#EC1C24';
    parent.style.color = '#FFF';
  } else {
    // 取消选中时清空当前行样式
    parent.style.background = '';
    parent.style.color = '';
  }
}

代码说明 #

• 把内部循环的变量名改成了j，避免和外部循环的i冲突，确保每个循环都能正常执行完毕。
• 重构了逻辑顺序：先清除所有行的样式，再处理复选框的互斥选中，最后根据当前复选框的状态设置对应行的样式。这样逻辑更清晰，不会出现样式被反复覆盖的问题。
• 简化了互斥选中的判断：只有当当前复选框被选中时，才去取消其他复选框的选中状态，减少不必要的循环判断。

这样修改后，不管点击哪个复选框，对应的行都能正确切换颜色样式了。

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