点击checkbox修改td背景色时颜色无法填满整个单元格的问题求助

问题原因 #

1. 递归逻辑错误：tdOnclick函数递归查找checkbox的过程中，将子元素作为参数传入自身，导致背景色实际被设置到了td的子元素（如label）上，子元素未撑满td就会出现背景空缺
2. 事件绑定错误：input元素的点击事件绑定代码完全无效，未阻止事件冒泡，点击checkbox时会触发td的点击事件，导致状态重复翻转
3. 样式冲突：td的默认padding和label的padding叠加，导致子元素尺寸小于td容器

修复方案 #

以下是修改后可以直接运行的完整代码：

JS代码

function onload() {
    var tds = document.getElementsByTagName("td");
    for(var i = 0; i < tds.length; i++) {
        tds[i].onclick = function(td) { 
            return function() { 
                tdOnclick(td); 
            }; 
        }(tds[i]); 
    }
    var inputs = document.getElementsByTagName("input");
    for(var i = 0; i < inputs.length; i++) {
        // 修复input点击事件，阻止冒泡避免重复触发
        inputs[i].onclick = function(e) {
            e = e || window.event;
            e.stopPropagation();
            // 点击input时同样触发td的状态切换
            tdOnclick(this.parentElement.parentElement);
        }
    }
}
function tdOnclick(td) {
    // 单独定义变量存储checkbox状态，不用递归修改参数
    let isChecked = false;
    // 递归查找td内的checkbox
    function findInput(node) {
        for(var i = 0; i < node.childNodes.length; i++) {
            if(node.childNodes[i].nodeType == 1) {
                if(node.childNodes[i].nodeName == "INPUT") {
                    isChecked = node.childNodes[i].checked;
                    // 翻转checkbox状态
                    node.childNodes[i].checked = !isChecked;
                    return;
                } else {
                    findInput(node.childNodes[i]);
                }
            }
        }
    }
    findInput(td);
    // 永远修改当前td的背景色，不会作用到子元素
    td.style.backgroundColor = !isChecked ? "#E4E978" : "white";
}

CSS代码

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  /* 去掉td的padding，让label可以撑满整个单元格 */
  padding: 0;
}

label{
    display:block;
    /* 调整padding到label上，保证点击区域足够 */
    padding: 28px;
    margin: 0;
    cursor: pointer;
}

.checkbx {
  text-align: center;
  vertical-align: middle;
}

.hidden {
    display: none;
}

HTML代码

<body onload="onload()">
  <table>
    <tr>
      <td>
      <label><input type="checkbox" class="hidden"></label>
      </td>
      <td>
      <label><input type="checkbox" class="hidden"></label>
      </td>
    </tr>
  </table>
</body>

核心修改点 #

• 拆分了checkbox查找逻辑和背景色修改逻辑，确保背景色永远作用在td元素本身
• 修复了input点击事件的绑定逻辑，添加了事件冒泡阻止，避免状态重复翻转
• 调整了td和label的padding设置，让label完全撑满td，点击区域覆盖整个单元格

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