根据 onclick 复选框更改 td 背景颜色

Question

我有一个 javascript 如果我点击复选框，它会改变 td 背景颜色。下面是 javascript

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++) {
                    inputs[i].onclick = 
                                   (inputs[i]); 
                }
            }
            function tdOnclick(td) {
                for(var i = 0; i < td.childNodes.length; i++) {
                    if(td.childNodes[i].nodeType == 1) {
                        if(td.childNodes[i].nodeName == "INPUT") {
                            if(td.childNodes[i].checked) {
                                td.childNodes[i].checked = false;
                                td.style.backgroundColor = "white";
                            } else {
                                td.childNodes[i].checked = true;
                                td.style.backgroundColor = "#E4E978";
                            }
                        } else {
                            tdOnclick(td.childNodes[i]);
                        }
                    }
                }
            }

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

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

label{
    display:block;
    padding:20px;
}

.checkbx {
  text-align: center;
  /* center checkbox horizontally */
  vertical-align: middle;
  /* center checkbox vertically */
}

.hidden {
    display: none;
}

<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>

颜色没有完全填满整个td。我试过去掉标签，还是一样。

这是我希望颜色填充整个 td 的示例：

screenshot of td

但我找不到解决方案。希望有人能帮忙。

Answer 1

Please replace your css with the following css and then check.
    table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }

    td, th {
        border: 1px solid #dddddd;
        text-align: left;
    }

    label{
        display:block;
        padding:20px;
    }

    .checkbx {
        text-align: center;
        /* center checkbox horizontally */
        vertical-align: middle;
        /* center checkbox vertically */
    }

    .hidden {
        display: none;
    }

根据 onclick 复选框更改 td 背景颜色

Change td background color based on onclick checbox

html

javascript

php

checkbox

onclick