Javascript实现表格的全选框

这是一个老生常谈的问题了，不过还是拿我的解决办法来晒晒太阳。

最开始我是为Table中的每一项添加属性 class="item1" 的方式实现的

1. 第一种解决方法

< table  border ="1"  cellpadding ="3"  cellspacing ="0" >
     < tr >
         < th >
             < input  type ="checkbox"  onclick ="checkAll(this, 'item1');"   />
         </ th >
         < th > ID </ th >
         < th > 用户名 </ th >
     </ tr >
     < tr >
         < td >
             < input  type ="checkbox"  class ="item1"   />
         </ td >
         < td > 1001 </ td >
         < td > 张三 </ td >
     </ tr >
     < tr >
         < td >
             < input  type ="checkbox"  class ="item1"   />
         </ td >
         < td > 1002 </ td >
         < td > 李四 </ td >
     </ tr >
</ table >

 

function  checkAll(sender, checkClass) {
     var  checkItems  =  document.getElementsByTagName( ' input ' );
     for  ( var  i  =   0 ; i  <  checkItems.length; i ++ ) {
         var  checkItem  =  checkItems[i];
         if  (checkItem.type  ===   ' checkbox '   &&  checkItem.className  ===   ' item1 ' ) {
            checkItem.checked  =  sender.checked;
        }
    }
}

 
仔细分析，这里面使用的 getElementsByTagName 会把页面上所有的 input 标签都找到（包括单行文本输入框，

按钮，所有的单选和多选框等），然后再执行过滤，这是一种效率不高的方法。

如果能用 getElementsByName 直接获取需要的多选框，岂不是更高效，就有了下面的方法

2. 第二种解决方法

< table  border ="1"  cellpadding ="3"  cellspacing ="0" >
     < tr >
         < th >
             < input  type ="checkbox"  onclick ="checkAll2(this, 'item1');"   />
         </ th >
         < th > ID </ th >
         < th > 用户名 </ th >
     </ tr >
     < tr >
         < td >
             < input  type ="checkbox"  name ="item1"   />
         </ td >
         < td > 1001 </ td >
         < td > 张三 </ td >
     </ tr >
     < tr >
         < td >
             < input  type ="checkbox"  name ="item1"   />
         </ td >
         < td > 1002 </ td >
         < td > 李四 </ td >
     </ tr >
</ table >

 

function  checkAll2(sender, checkName) {
     var  checkItems  =  document.getElementsByName(checkName);
     for  ( var  i  =   0 ; i  <  checkItems.length; i ++ ) {
        checkItems[i].checked  =  sender.checked;
    }
}

 

代码下载

[updated,2009-2-17]

上面这种方法虽然简洁，但是 getElementsByName 只是 document 的方法，其他DOM对象没有此方法。（正如留言中 @笛子 所说）

所以效率比较高的方法，还是在table的上下文中使用 getElementsByTagName 来查找，我们给 table 添加 id 属性

为 table1。

3. 效率比较高的解决方法

 

< input  type ="checkbox"  onclick ="checkAll3(this, 'table1', 'item1');"   />

 

function  checkAll3(sender, tableId, checkClass) {
     var  checkItems  =  document.getElementById(tableId).getElementsByTagName( ' input ' );
     for  ( var  i  =   0 ; i  <  checkItems.length; i ++ ) {
         var  checkItem  =  checkItems[i];
         if  (checkItem.type  ===   ' checkbox '   &&  checkItem.className  ===   ' item1 ' ) {
            checkItem.checked  =  sender.checked;
        }
    }
}

代码下载