<!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>