正文
JavaScript实现全选功能
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
最终效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选功能</title>
<script> function selectAll(choiceBtn){ //document.getElementsByTagName()
var arr=document.getElementsByName("choice");
for(var i=0;i<arr.length;i++){
arr[i].checked=choiceBtn.checked;//循环遍历看是否全选
}
}
</script> </head>
<body>
<table border="1" width="800px" height="800px"> <tr>
<td><input type="checkbox" onclick="selectAll(this)" />全选</td><td>用户名</td><td>邮箱</td><td>电话号码</td><td>性别</td><td>操作</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" /></td><td>perfect*</td><td>3413319614@qq.com</td><td>3413319614</td><td>女</td><td>删除 编辑 设置</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" /></td><td>perfect*</td><td>3413319614@qq.com</td><td>3413319614</td><td>女</td><td>删除 编辑 设置</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" /></td><td>perfect*</td><td>3413319614@qq.com</td><td>3413319614</td><td>女</td><td>删除 编辑 设置</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" /></td><td>perfect*</td><td>3413319614@qq.com</td><td>3413319614</td><td>女</td><td>删除 编辑 设置</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" /></td><td>perfect*</td><td>3413319614@qq.com</td><td>3413319614</td><td>女</td><td>删除 编辑 设置</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" /></td><td>perfect*</td><td>3413319614@qq.com</td><td>3413319614</td><td>女</td><td>删除 编辑 设置</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" /></td><td>perfect*</td><td>3413319614@qq.com</td><td>3413319614</td><td>女</td><td>删除 编辑 设置</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" /></td><td>perfect*</td><td>3413319614@qq.com</td><td>3413319614</td><td>女</td><td>删除 编辑 设置</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" /></td><td>perfect*</td><td>3413319614@qq.com</td><td>3413319614</td><td>女</td><td>删除 编辑 设置</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" /></td><td>perfect*</td><td>3413319614@qq.com</td><td>3413319614</td><td>女</td><td>删除 编辑 设置</td>
</tr>
</table>
</body>
</html>
全选功能.html
在代码中定义了一个onclick事件
<tr>
<td><input type="checkbox" onclick="selectAll(this)" />全选</td><td>用户名</td><td>邮箱</td><td>电话号码</td><td>性别</td><td>操作</td>
</tr>
注意：针对本实例来说不能使用document.getElementsByTagName()获取标签，因为获取的对象不精确。
定义的事件selectAll()
<script> function selectAll(choiceBtn){ //document.getElementsByTagName()
var arr=document.getElementsByName("choice");
for(var i=0;i<arr.length;i++){
arr[i].checked=choiceBtn.checked;//循环遍历看是否全选
}
}
</script>
