选中所有复选框 [英] check all the check box

问题描述

我创建了一个包含很多复选框的表格，但现在我希望能够使用通用复选框。

像这样：

 < tr> 
< th scope =row> Indice< / th> 
< td>< input type =checkboxid =check1>< / td> 
< td>< input type =checkboxid =check2>< / td> 
< td>< input type =checkboxid =check3>< / td> 
< td>< button onclick =check（）>检查复选框< / button> 
< button onclick =uncheck（）>取消勾选复选框< / button>< / td> 
< / tr> 
  

嗯，我已经在javascript上完成了这项工作：

 <脚本> 
函数check（）
 {
 document.getElementById（check1）。checked = true 
 document.getElementById（check2）。checked = true 
 document .getElementById（check3）。checked = true 
} 
函数uncheck（）
 {
 document.getElementById（check1）。checked = false 
 document .getElementById（check2）。checked = false 
 document.getElementById（check3）。checked = false 
} 
函数selectAll（frmElement，chkElement）{
 // ... 
} 
 document.getElementById（check_all_1）。onclick = function（）{
 selectAll（document.wizard_form，this）; 
} 
< / script> 
  

到目前为止这么好......但是......理念是从数据库获得一些结果，并没有改变我正在做这个javascriptcheck3，check4...我应该怎么做？ 解决方案

一个简单的普通JavaScript（无需库）版本：

 函数检查（）{
 var button = this.className.indexOf（'uncheckAll'）=== -1，
 row = this.parentNode.parentNode，
 inputs = row.getElementsByTagName（'input'）; 
 
 for（var i = 0，len = inputs.length; i< len; i ++）{
 if（inputs [i] .type =='checkbox'）{
 inputs [i] .checked = button; 
} 
} 
 
} 
 
 var buttons = document.getElementsByTagName（'button'）; 
 for（var i = 0，len = buttons.length; i< len; i ++）{
 buttons [i] .addEventListener（'click'，checks）; 
} 
  

JS Fiddle演示。

上面的修改避免了必须显式遍历DOM（使用顺序<$ c （简单） nearest（） shim：<$ c> parentNode.parentNode ...需要HTML结构的预先知识） / p>

  HTMLElement.prototype.closest = function（tagName）{
 tagName = tagName.toLowerCase（）; 
 var self = this，
 selfTag = self.tagName.toLowerCase（）; 
返回selfTag == tagName？ self：self.parentNode.closest（tagName）; 
 
 
函数checks（）{
 var button = this.className.indexOf（'uncheckAll'）=== -1，
 row = this.closest （'tr'），
 inputs = row.getElementsByTagName（'input'）; 
 
 for（var i = 0，len = inputs.length; i< len; i ++）{
 if（inputs [i] .type =='checkbox'）{
 inputs [i] .checked = button; 
} 
} 
 
} 
 
 var buttons = document.getElementsByTagName（'button'）; 
 for（var i = 0，len = buttons.length; i< len; i ++）{
 buttons [i] .addEventListener（'click'，checks）; 
} 
  

JS Fiddle演示。

参考文献：

• 文档。 getElementsByTagName（） 。


• Element.addEventListener（） 。 Element.tagName 。


• 节点.parentNode 。


• String.toLowerCase（） 。
  

I've created a table with a lot of checkbox's, but now I want to be able to use a "universal" checkbox.

Like this:

<tr>
      <th scope="row">Indice</th>
      <td><input type="checkbox" id="check1"></td>
      <td><input type="checkbox" id="check2"></td>
      <td><input type="checkbox" id="check3"></td>
      <td><button onclick="check()">Check Checkbox</button>
          <button onclick="uncheck()">Uncheck Checkbox</button></td>  
</tr>

Well I've done this on javascript:

<script>
function check()
  {
  document.getElementById("check1").checked=true
  document.getElementById("check2").checked=true
  document.getElementById("check3").checked=true
  }
function uncheck()
  {
  document.getElementById("check1").checked=false
  document.getElementById("check2").checked=false
  document.getElementById("check3").checked=false
  }
function selectAll(frmElement, chkElement) {
    // ...
}
document.getElementById("check_all_1").onclick = function() {
    selectAll(document.wizard_form, this);
}
</script>

So far so good... but... the ideia is to have some results from a database, and there is no change I'm doing this javascript "check3", "check4" ... how should I do that?

解决方案

A simple plain-JavaScript (no library required) version:

function checks (){
    var button = this.className.indexOf('uncheckAll') === -1,
        row = this.parentNode.parentNode,
        inputs = row.getElementsByTagName('input');

    for (var i = 0, len = inputs.length; i < len; i++) {
        if (inputs[i].type == 'checkbox') {
            inputs[i].checked = button;
        }
    }

}

var buttons = document.getElementsByTagName('button');
for (var i = 0, len = buttons.length; i < len; i++) {
    buttons[i].addEventListener('click', checks);
}

JS Fiddle demo.

The above amended to avoid having to explicitly traverse the DOM (which, using sequential parentNode.parentNode... requires an advance knowledge of the HTML structure), using a (simple) closest() shim:

HTMLElement.prototype.closest = function (tagName) {
    tagName = tagName.toLowerCase();
    var self = this,
        selfTag = self.tagName.toLowerCase();
    return selfTag == tagName ? self : self.parentNode.closest(tagName);
}

function checks (){
    var button = this.className.indexOf('uncheckAll') === -1,
        row = this.closest('tr'),
        inputs = row.getElementsByTagName('input');

    for (var i = 0, len = inputs.length; i < len; i++) {
        if (inputs[i].type == 'checkbox') {
            inputs[i].checked = button;
        }
    }

}

var buttons = document.getElementsByTagName('button');
for (var i = 0, len = buttons.length; i < len; i++) {
    buttons[i].addEventListener('click', checks);
}

JS Fiddle demo.

References:

• document.getElementsByTagName().
• Element.addEventListener().
• Element.tagName.
• Node.parentNode.
• String.toLowerCase().

这篇关于选中所有复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！