<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>全选/反选</title>
</head>
<style type="text/css">
*{
padding:0px;
margin:0px;
}
#content{
width:800px;
border:1px solid grey;
/*margin:50px auto;*/
}
table th {
width: 200px;
}
table td{
width: 200px;
text-align: center;
}
</style>
<body>
<div id="content">
<table>
<tr>
<!-- <th>:table中的列标题（自动加粗）-->
<th><input type="checkbox" name="setchoose">
<th>学号</th>
<th>姓名</th>
<th>班级</th>
</th>
</tr>
<tr>
<td><input type="checkbox" name="setchoose">
<td>001</td>
<td>张三</td>
<td>F07</td>
</td>
</tr>
<tr>
<td><input type="checkbox" name="setchoose">
<td>001</td>
<td>张三</td>
<td>F07</td>
</td>
</tr>
<tr>
<td><input type="checkbox" name="setchoose">
<td>001</td>
<td>张三</td>
<td>F07</td>
</td>
</tr>
<tr>
<td><input type="checkbox" name="setchoose">
<td>001</td>
<td>张三</td>
<td>F07</td>
</td>
</tr>
</table>
</div>
<!--按钮-->
<input type="button" value="全选" onclick="allcheck()"/>
<input type="button" value="反选" onclick="nocheck()"/>
<script type="text/javascript">
var chkall=document.getElementsByName("setchoose");//获取复选框的id
// 全选
function allcheck(){
for(var i=0;i<chkall.length;i++){
chkall[i].setAttribute("checked","checked");//默认选中
}
}
// 全不选
function nocheck(){
for(var i=0;i<chkall.length;i++){
chkall[i].removeAttribute("checked");//删除默认选中的属性
}
}
</script>
</body>
</html>
<!--1、属性操作：
元数对象.setAttribute(属性名,属性的值);//设置属性的值，也可以添加属性的值
元数对象.removeAttribute(属性名);//删除对应的属性
元数对象.attributes;//返回这个元素上的所有属性，返回的是数组
元数对象.getAttribute(属性名);//返回对应属性的值
2、访问节点的四种方式：
（1）document.getElementBYId(id名称）
（2）document.getElementsBYTagName(标签名称）
（3）document.getElementsBYClassName(类名称）
（4）document.getElementsBYName(name值）
