表头颜色复选框选中/取消选中答案

【问题标题】：Table thead color checkbox check/Uncheck表头颜色复选框选中/取消选中
【发布时间】：2018-11-04 02:52:15
【问题描述】：

我对表格中的所有复选框都有一个简短的问题。我不想改变第一个thead tr的颜色，如何从标题中删除颜色？

我粘贴了代码，我只使用纯 Javascript。

function allpart(chk){
    var parent = chk.parentNode.parentNode;
    var checkboxes = document.getElementsByTagName('input');
    var chkpart = document.getElementById('idpart');
    if(chk.checked){
        for(var i=0;i<checkboxes.length;i++){
            if(checkboxes[i].type == 'checkbox'){
                checkboxes[i].checked = true;
                checkboxes[i].parentNode.parentNode.style.background = "#CC0000";
                checkboxes[i].parentNode.parentNode.style.color = "#FFF";
            }
        }
    }else{
        for(var i=0;i<checkboxes.length;i++){
            if(checkboxes[i].type == 'checkbox'){
                checkboxes[i].checked = false;
                checkboxes[i].parentNode.parentNode.style.background = "";
                checkboxes[i].parentNode.parentNode.style.color = "";   
            }
        }
    }

通过 html

<table align="center" width="540px" class="tbcuadro">
<thead>
	<tr>
	<th width="5%"><input name="idpart[]" id="idpart" type="checkbox" onclick="allpart(this);"></th>
	<th width="75%" align="center">NAME</th>
	<th width="20%" align="center">NUMBER</th>
	</tr>
</thead>
<tbody>
 <tr>
    <td width="5%"><input name="idpart" type='checkbox'></td>
    <td width="75%">row 1</td>
    <td width="20%">row 2</td>    
  </tr>
 <tr>
    <td width="5%"><input name="idpart" type='checkbox'></td>
    <td width="75%">row 1</td>
    <td width="20%">row 2</td>    
  </tr>
 <tr>
    <td width="5%"><input name="idpart" type='checkbox'></td>
    <td width="75%">row 1</td>
    <td width="20%">row 2</td>    
  </tr>
</tbody>
</table>

【问题讨论】：

可以添加你的html\
为什么从第 2 行开始？
我更正了我没有注意到

标签： javascript html checkbox colors html-table

【解决方案1】：

这部分代码将删除所有ths中的color和background。

var th = document.getElementsByTagName('th');
  for (var i = 0; i < th.length; i++) {
  th[i].style.color = "black";
  th[i].style.background = "white";
}

我认为这部分代码也是错误的。我将起始索引从 2 更改为 0

for (var i = 0; i < checkboxes.length; i++) {
  if (checkboxes[i].type == "checkbox") {
    checkboxes[i].checked = false;
    checkboxes[i].parentNode.parentNode.style.background = "";
    checkboxes[i].parentNode.parentNode.style.color = "";
  }
}

希望对你有帮助

function allpart(chk) {
  var parent = chk.parentNode.parentNode;
  var checkboxes = document.getElementsByTagName("input");
  var chkpart = document.getElementById("idpart");
  if (chk.checked) {
    for (var i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].type == "checkbox") {
        checkboxes[i].checked = true;
        checkboxes[i].parentNode.parentNode.style.background = "#CC0000";
        checkboxes[i].parentNode.parentNode.style.color = "#FFF";
      }
    }
  } else {
    for (var i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].type == "checkbox") {
        checkboxes[i].checked = false;
        checkboxes[i].parentNode.parentNode.style.background = "";
        checkboxes[i].parentNode.parentNode.style.color = "";
      }
    }
  }
  var th = document.getElementsByTagName('th');
  for (var i = 0; i < th.length; i++) {
    th[i].style.color = "black";
    th[i].style.background = "white";
  }
}

<table align="center" width="540px" class="tbcuadro">
  <thead>
    <tr>
      <th width="5%"><input name="idpart[]" id="idpart" type="checkbox" onclick="allpart(this)"></th>
      <th width="75%" align="center">NAME</th>
      <th width="20%" align="center">NUMBER</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td width="5%"><input name="idpart" type='checkbox'></td>
      <td width="75%">row 1</td>
      <td width="20%">row 2</td>
    </tr>
    <tr>
      <td width="5%"><input name="idpart" type='checkbox'></td>
      <td width="75%">row 1</td>
      <td width="20%">row 2</td>
    </tr>
    <tr>
      <td width="5%"><input name="idpart" type='checkbox'></td>
      <td width="75%">row 1</td>
      <td width="20%">row 2</td>
    </tr>
  </tbody>
</table>

【讨论】：

谢谢你！我学习了stackoverflow平台的使用。
欢迎您。如果是真的，你可以接受答案。祝你好运。我建议你阅读这个Tour@Kais

【解决方案2】：

使用基于 thead 或 tbody 的条件来设置颜色。例如如果checkboxes[i].parent("tbody").is("tbody") 则设置颜色。

【讨论】：

【解决方案3】：

如果您想从标题中删除颜色，请不要写：

checkboxes[i].parentNode.parentNode.style.background = "";

只写：

checkboxes[i].parentNode.parentNode.style.background = "transparent";

【讨论】：