本节分享下javascript操作表格的例子，用来实现表格的全选。
建议：为Table中的每一项添加属性 class="item1" 的方式实现此功能。
1，方法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>
<script>
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;
}
}
}
</script>
说明：
getElementsByTagName 会把页面上所有的 input 标签都找到（包括单行文本输入框，按钮，所有的单选和多选框等），然后再执行过滤，效率一般。
可以考虑用 getElementsByName 直接获取需要的多选框，见方法2。
方法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>
<script>
function checkAll2(sender, checkName) {
var checkItems = document.getElementsByName(checkName);
for (var i = 0; i < checkItems.length; i++) {
checkItems[i].checked = sender.checked;
}
}
</script>
说明：
getElementsByName 只是 document 的方法，其他DOM对象没有此方法。
更好的方法，还是在table的上下文中使用 getElementsByTagName 来查找，给 table 添加 id 属性为 table1，详见方法3。
方法3，
代码：
复制代码 代码示例:
<input type="checkbox" onclick="checkAll3(this, 'table1', 'item1');" />
<script>
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;
}
}
}
</script>
