效果圖：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全選和反選</title>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
window.onload = function(){
//全選
$("chkAll").onclick = function(){
var ipts = $("favors").getElementsByTagName("input");
for (var i = 0; i < ipts.length; i++) {
ipts[i].checked = $("chkAll").checked;
}
}
//反選
$("reverse").onclick = function(){
var res = $("favors").getElementsByTagName("input");
for (var i = 0; i < res.length; i++) {
res[i].checked = !res[i].checked;
}
}
//使全選框和下面各個興趣框同步
var fvs = $("favors").getElementsByTagName("input");
for (var i = 0; i < fvs.length; i++) {
fvs[i].onclick = function(){
var isCheckAll = true;
for (var j = 0; j < fvs.length; j++) {
if (!fvs[j].checked) {
isCheckAll = false;
break;
}
}
$("chkAll").checked = isCheckAll;
}
}
}
</script>
</head>
<body>
<h1>你的興趣是什麼？</h1>
<input type="checkbox" id="chkAll" value="全選" /> <label for="chkAll">全選</label>
<input type="button" id="reverse" value="反選" />
<p></p>
<div id="favors">
<input type="checkbox">Python
<input type="checkbox">Java
<input type="checkbox">JavaScript
<input type="checkbox">C#
<input type="checkbox">C++
</div>
</body>
</html>