最终效果:

JavaScript实现全选功能-LMLPHP

代码:

 <!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>
05-11 19:52