首页 > IT职业 > IT生活 > Javascript实现表格的全选框
这是一个老生常谈的问题了,不过还是拿我的解决办法来晒晒太阳。
最开始我是为Table中的每一项添加属性 class="item1" 的方式实现的
1. 第一种解决方法

|
|
ID | 用户名 |
|---|---|---|
|
|
1001 | 张三 |
|
|
1002 | 李四 |

function checkAll(sender, checkClass) {
var checkItems = document.getElementsByTagName('input');
for (var i = 0; i var checkItem = checkItems[i];
if (checkItem.type === 'checkbox' && checkItem.className === 'item1') {
checkItem.checked = sender.checked;
}
}
}
仔细分析,这里面使用的 getElementsByTagName 会把页面上所有的 input 标签都找到(包括单行文本输入框,
按钮,所有的单选和多选框等),然后再执行过滤,这是一种效率不高的方法。
如果能用 getElementsByName 直接获取需要的多选框,岂不是更高效,就有了下面的方法
2. 第二种解决方法

|
|
ID | 用户名 |
|---|---|---|
|
|
1001 | 张三 |
|
|
1002 | 李四 |

function checkAll2(sender, checkName) {
var checkItems = document.getElementsByName(checkName);
for (var i = 0; i checkItems[i].checked = sender.checked;
}
}
代码下载
[updated,2009-2-17]
上面这种方法虽然简洁,但是 getElementsByName 只是 document 的方法,其他DOM对象没有此方法。(正如留言中 @笛子 所说)
所以效率比较高的方法,还是在table的上下文中使用 getElementsByTagName 来查找,我们给 table 添加 id 属性
为 table1。
3. 效率比较高的解决方法

function checkAll3(sender, tableId, checkClass) {
var checkItems = document.getElementById(tableId).getElementsByTagName('input');
for (var i = 0; i var checkItem = checkItems[i];
if (checkItem.type === 'checkbox' && checkItem.className === 'item1') {
checkItem.checked = sender.checked;
}
}
}
来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/2146/viewspace-2800201/ ,如需转载,请注明出处,否则将追究法律责任。