代码之家 › 专栏 › 技术社区 › Kais

带有输入复选框的表格选中/取消选中

checkbox javascript

Kais · 技术社区 · 6 年前

当我在随附的表格中使用颜色样式进行检查时,我遇到了一个问题,但当我单击第一个复选框时,任何复选框都不会更改颜色样式。

我粘贴代码,只使用纯javascript。

enter function valid(chk){
    var trckk = document.getElementsByTagName('tr');
    var parent = chk.parentNode.parentNode;
    var chkcomite = document.getElementsByName('idcom');
    var len = chkcomite.length;
    for(var i=0;i<len;i++){
        if(chkcomite[i].checked === true){
            if(chkcomite[i]!=chk && chk.checked){
                chkcomite[i].checked = false;
                for(var i=0;i<trckk.length;i++){
                    trckk[i].style.background='';
                    trckk[i].style.color='';
                }
            }
            parent.style.background='#EC1C24';
            parent.style.color='#FFF';  
        }else{
            parent.style.background='';
            parent.style.color='';
        }
    }
}

在这里

你能帮助我吗?。谢谢

1 回复 | 直到 6 年前

Saeed 6 年前

我想你必须这样写函数

function valid(chk) {
  var parent = chk.parentNode.parentNode;
  if (!chk.checked) {
    parent.style.background = "";
    parent.style.color = "";
    return;
  }
  var trckk = document.getElementsByTagName("tr");
  var chkcomite = document.getElementsByName("idcom");
  var len = chkcomite.length;
  for (var i = 0; i < trckk.length; i++) {
    trckk[i].style.background = "";
    trckk[i].style.color = "";
  }
  for (var i = 0; i < len; i++) {
    chkcomite[i].checked = false;
    chkcomite[i].parentNode.parentNode.style.background = "";
    chkcomite[i].parentNode.parentNode.style.color = "";
  }
  chk.checked = true;
  parent.style.background = "#EC1C24";
  parent.style.color = "#FFF";
}

<table>
  <tr>
    <td>
      row 1
    </td>
    <td>
      <input onchange="valid(this)" name="idcom" type='checkbox'>
    </td>
  </tr>
  <tr>
    <td>
      row 2
    </td>
    <td>
      <input onchange="valid(this)" name="idcom" type='checkbox'>
    </td>
  </tr>
  <tr>
    <td>
      row 3
    </td>
    <td>
      <input onchange="valid(this)" name="idcom" type='checkbox'>
    </td>
  </tr>
</table>

推荐文章

Mickey Vershbow · 无法获取复选框的“checked”属性

2 年前

XAZG ÐÐµÐ¸Ð·Ð²ÐµÑÑÐ½ÑÐ¹ · 如何在for js之后重置字符串变量

2 年前

SãOãNã JãOãã · Google sheets复选标记条件格式化

2 年前

Ranjith Raina · 在jquery中,可以将所有复选框值转换为逗号分隔的字符串

2 年前

Alex · 引导对齐表单开关左侧的标签

2 年前

Khilen Maniyar · 角度2:带有复选框的阵列工作不正常

6 年前

Yash Saraiya · jQuery datatable:在每个分页上启用几个文本框

6 年前

Kais · 带有输入复选框的表格选中/取消选中

6 年前

Silu K · 单击复选框后,如何将之前的所有复选框设置为在angular 4中选中

6 年前

yuggmeister · 如何使自定义复选框可访问?

6 年前