Javascript实现表格的全选框

核心提示：本文示例源代码或素材下载 这是一个老生常谈的问题了，不过还是拿我的解决办法来晒晒太阳，Javascript实现表格的全选框，最开始我是为Table中的每一项添加属性 class="item1" 的方式实现的1. 第一种解决方法<tableborder="1"cell

本文示例源代码或素材下载

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

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

1. 第一种解决方法

<tableborder="1"cellpadding="3"cellspacing="0">
　　<tr>
　　　　<th>
　　　　　　<inputtype="checkbox"onclick="checkAll(this,'item1');"/>
　　　　</th>
　　　　<th>ID</th>
　　　　<th>用户名</th>
　　</tr>
　　<tr>
　　　　<td>
　　　　　　<inputtype="checkbox"class="item1"/>
　　　　</td>
　　　　<td>1001</td>
　　　　<td>张三</td>
　　</tr>
　　<tr>
　　　　<td>
　　　　　　<inputtype="checkbox"class="item1"/>
　　　　</td>
　　　　<td>1002</td>
　　　　<td>李四</td>
　　</tr>
</table>
　　
functioncheckAll(sender,checkClass){
　　varcheckItems=document.getElementsByTagName('input');
　　for(vari=0;i<checkItems.length;i++){
　　　　varcheckItem=checkItems[i];
　　　　if(checkItem.type==='checkbox'&&checkItem.className==='item1'){
　　　　　　checkItem.checked=sender.checked;
　　　　}
　　}
}

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

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

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

2. 第二种解决方法

<tableborder="1"cellpadding="3"cellspacing="0">
　　<tr>
　　　　<th>
　　　　　　<inputtype="checkbox"onclick="checkAll2(this,'item1');"/>
　　　　</th>
　　　　<th>ID</th>
　　　　<th>用户名</th>
　　</tr>
　　<tr>
　　　　<td>
　　　　　　<inputtype="checkbox"name="item1"/>
　　　　</td>
　　　　<td>1001</td>
　　　　<td>张三</td>
　　</tr>
　　<tr>
　　　　<td>
　　　　　　<inputtype="checkbox"name="item1"/>
　　　　</td>
　　　　<td>1002</td>
　　　　<td>李四</td>
　　</tr>
</table>
　　
functioncheckAll2(sender,checkName){
　　varcheckItems=document.getElementsByName(checkName);
　　for(vari=0;i<checkItems.length;i++){
　　　　checkItems[i].checked=sender.checked;
　　}
}

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

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

为 table1。

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

<inputtype="checkbox"onclick="checkAll3(this,'table1','item1');"/>
　　
functioncheckAll3(sender,tableId,checkClass){
　　varcheckItems=document.getElementById(tableId).getElementsByTagName('input');
　　for(vari=0;i<checkItems.length;i++){
　　　　varcheckItem=checkItems[i];
　　　　if(checkItem.type==='checkbox'&&checkItem.className==='item1'){
　　　　　　checkItem.checked=sender.checked;
　　　　}
　　}
}