checkAllBoxes.html
<!DOCTYPE html>
<html>
<head>
<title>选中所有checkbox</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function checkAll() {
var checkAllEle = document.getElementById("checkAll");
if(checkAllEle.checked == true) {
var checkOnes = document.getElementsByName("checkOne");
for(var i=0; i<checkOnes.length; i++) {
checkOnes[i].checked = true;
}
}
}
function cancelAll() {
var checkOnes = document.getElementsByName("checkOne");
for(var i=0; i<checkOnes.length; i++) {
checkOnes[i].checked = false;
}
}
</script>
</head>
<body>
<table>
<tr>
<td><input οnclick="checkAll()" id="checkAll" type="checkbox"/></td>
<td>全选</td>
</tr>
<tr>
<td><input name="checkOne" type="checkbox"/></td>
<td>tokyo hot</td>
</tr>
<tr>
<td><input name="checkOne" type="checkbox"/></td>
<td>dota</td>
</tr>
<tr>
<td><input name="checkOne" type="checkbox"/></td>
<td>lol</td>
</tr>
<tr>
<td><input name="checkOne" type="checkbox"/></td>
<td>WOW</td>
</tr>
<tr>
<td><input name="checkOne" type="checkbox"/></td>
<td>warcraft</td>
</tr>
<tr>
<td><input name="checkOne" type="checkbox"/></td>
<td>CS:GO</td>
</tr>
</table>
<!-- <span οnclick="cancelAll()" style="color:#00BFFF; ">反选</span> -->
<button οnclick="cancelAll()" style="color: #FF8C00; background-color: black;">反选</button>
</body>
</html>
