<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function(){
//全选
document.getElementById("chkAll").onclick = function(){
//console.log(this.checked);
var interests = document.getElementsByName("interest");
for(var i=0; i<interests.length; i++){
interests[i].checked = this.checked;
}
}
//反选
document.getElementById("btnReverse").onclick = function(){
var interests = document.getElementsByName("interest");
for(var i=0; i<interests.length; i++){
interests[i].checked = !interests[i].checked;
}
//检查全选状态
checkAll();
}
//为每一个复选框注册单击事件
var interests = document.getElementsByName("interest");
for(var i=0; i<interests.length; i++){
interests[i].onclick = checkAll; //注册单击事件的处理函数，不能加()
}
//检查全选状态
function checkAll(){
/*
//方式1
var checkCount = 0; //当前选中的个数
var interests = document.getElementsByName("interest");
for(var i=0; i<interests.length; i++){
if(interests[i].checked){
checkCount++;
}
}
document.getElementById("chkAll").checked = (checkCount == interests.length);
*/
//方式2
var selectFlag = true; //默认都选中
var interests = document.getElementsByName("interest");
for(var i=0; i<interests.length; i++){
if(!interests[i].checked){
selectFlag = false;
break;
}
}
document.getElementById("chkAll").checked = selectFlag;
}
}
</script>
</head>
<body>
<input type="checkbox" name="interest"/>唱歌
<input type="checkbox" name="interest"/>跳舞
<input type="checkbox" name="interest"/>跑步
<input type="checkbox" name="interest"/>游泳
<br/>
<input type="checkbox" id="chkAll"/>全选
<input type="button" value="反选" id="btnReverse"/>
</body>
</html>