先获取到全选按钮,用来获取全选按钮的选中状态
再设置每一个多选框 的选中状态 和 全选按钮的状态一致
以下是代码实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//全选
function checkAll(){
//获取到全选按钮,用来获取全选按钮的选中状态
var checkAll = document.getElementById("checkAll");
//获取到所的多选框
var is = document.getElementsByName("c");
// alert(is.length);
// alert(checkAll.checked);
//遍历多选按钮
for(var i=0;i<is.length;i++){
//设置每一个多选框 的选中状态 和 全选按钮的状态一致
is[i].checked = checkAll.checked;
}
}
function fx(){
//获取到所有的多选框
var is = document.getElementsByName("c");
//遍历
for(var i=0;i<is.length;i++){
//设置多选框的选中状态为相反的
is[i].checked = !(is[i].checked);
}
}
</script>
</head>
<body>
<table width="80%" border="1" align="center">
<tr>
<td colspan="5">
全选
<input type="checkbox" onclick="checkAll()" id="checkAll" />
反选
<input type="checkbox" onclick="fx()" />
</td>
</tr>
<tr>
<td>
<input name="c" type="checkbox" />
</td>
<td>
<input name="c" type="checkbox" />
</td>
<td>
<input name="c" type="checkbox" />
</td>
<td>
<input name="c" type="checkbox" />
</td>
<td>
<input name="c" type="checkbox" />
</td>
</tr>
<tr>
<td>
<input name="c" type="checkbox" />
</td>
<td>
<input name="c" type="checkbox" />
</td>
<td>
<input name="c" type="checkbox" />
</td>
<td>
<input name="c" type="checkbox" />
</td>
<td>
<input name="c" type="checkbox" />
</td>
</tr>
<tr>
<td>
<input name="c" type="checkbox" />
</td>
<td>
<input name="c" type="checkbox" />
</td>
<td>
<input name="c" type="checkbox" />
</td>
<td>
<input name="c" type="checkbox" />
</td>
<td>
<input name="c" type="checkbox" />
</td>
</tr>
<tr>
<td>
<input name="c" type="checkbox" />
</td>
<td>
<input name="c" type="checkbox" />
</td>
<td>
<input name="c" type="checkbox" />
</td>
<td>
<input name="c" type="checkbox" />
</td>
<td>
<input name="c" type="checkbox" />
</td>
</tr>
</table>
</body>
</html>