<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- 總結：
給checkbox動態註冊事件時，inputs[i].onclick = singleCheck;不能寫成inputs[i].onclick = singleCheck(); -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
//全選
function checkAll() {
//觸發事件的對象
var obj = event.srcElement;
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
//判斷當前input對象，是不是checkbox
if (inputs[i].type == "checkbox") {
inputs[i].checked = obj.checked;
}
}
}
//給所有子checkbox註冊事件
window.onload = function () {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox" && inputs[i].id != "chkAll") {
//注意註冊事件不能寫成inputs[i].onclick = singleCheck();
inputs[i].onclick = singleCheck;
}
}
}
//反選
function btn_click() {
var inputs = document.getElementsByTagName("input")
for (var j = 0; j < inputs.length; j++) {
if (inputs[j].type == "checkbox" && inputs[j].id != "chkAll") {
inputs[j].checked = !inputs[j].checked;
}
}
singleCheck();
}
//子checkbox事件的方法，判斷所有子checkbox是否都被選中
function singleCheck() {
var inputs = document.getElementsByTagName("input");
//假設所有checkbox都選中
var isCheckAll = true;
for (var j = 0; j < inputs.length; j++) {
if (inputs[j].type == "checkbox" && inputs[j].id != "chkAll") {
if (!inputs[j].checked) {
isCheckAll = false;
break;
}
}
}
//設置全選的狀態
document.getElementById("chkAll").checked = isCheckAll;
}
</script>
</head>
<body>
<input type="checkbox" id="chkAll" οnclick="checkAll()"/>全選
<input type="button" id="btnCon" value="反選" οnclick="btn_click()"/>
<br/>
<input type="checkbox" value="chifan" name="aihao"/>吃飯
<input type="checkbox" value="shuijiao" name="aihao"/>睡覺
<input type="checkbox" value="dadoudou" name="aihao"/>打豆豆
</body>
</html>