作者：-_-小欢欢-_- | 来源：互联网 | 2023-06-27 10:24
这是一个老生常谈的问题了，不过还是拿我的解决办法来晒晒太阳。
最开始我是为Table中的每一项添加属性 class="item1" 的方式实现的
1. 第一种解决方法
<table border="1" cellpadding="3" cellspacing="0">
<tr>
<th>
<input type="checkbox" onclick="checkAll(this, 'item1');" />
th>
<th>IDth>
<th>用户名th>
tr>
<tr>
<td>
<input type="checkbox" class="item1" />
td>
<td>1001td>
<td>张三td>
tr>
<tr>
<td>
<input type="checkbox" class="item1" />
td>
<td>1002td>
<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>IDth>
<th>用户名th>
tr>
<tr>
<td>
<input type="checkbox" name="item1" />
td>
<td>1001td>
<td>张三td>
tr>
<tr>
<td>
<input type="checkbox" name="item1" />
td>
<td>1002td>
<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;
}
}
}
代码下载
![[JavaScript] 多数前端工程师都没注意到的一个关于console.log()的坑](https://img1.php1.cn/3cd4a/24c6f/711/31e04e6afc25be0a.jpeg)
京公网安备 11010802041100号