描述：单选框事件练习
点击全选按钮，所有复选框都被选上，点击全不选按钮，所有复选框都被取消
如图所示
-->
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选练习</title>
</head>
<script type="text/javascript">
window.onload = function(){
//获取所有的item列表
var items = document.getElementsByName("items");
//alert(items.length);
var checkedAllBox = document.getElementById("checkedAllBox");
//为全选按钮框绑定点击响应函数
var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function(){
for(var i=0;i<items.length ; i++){
items[i].checked = true;
}
checkedAllBox.checked = true;
};
//为全不选按钮绑定点击响应函数
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function(){
for(var i=0;i<items.length ; i++){
items[i].checked = false;
}
checkedAllBox.checked = false;
};
//为反选框绑定点击响应函数
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function(){
checkedAllBox.checked = true;
for(var i=0;i<items.length ; i++){
items[i].checked = !items[i].checked;
if(!items[i].checked)
checkedAllBox.checked = false;
}
};
//为提交按钮框绑定点击响应函数
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function(){
var str = " ";
for(var i=0;i<items.length ; i++){
if(items[i].checked)
//str保存选中项目的value的值
str+=" "+items[i].value;
}
alert(str);
};
//为全选/全不选复选框绑定点击响应函数
checkedAllBox.onclick = function(){
for(var i=0;i<items.length ;i++)
//this代表的是全选/全不选复选框的checked的状态
items[i].checked = this.checked;
};
//为四个多选框分别绑定点击响应函数
for(var i = 0; i < items.length; i++) {
items[i].onclick = function() {
//将checkedAllBox设置为选中状态
checkedAllBox.checked = true;
for(var j = 0; j < items.length; j++) {
//判断四个多选框是否全选
//只要有一个没选中则就不是全选
if(!items[j].checked) {
//一旦进入判断，则证明不是全选状态
//将checkedAllBox设置为没选中状态
checkedAllBox.checked = false;
//一旦进入判断，则已经得出结果，不用再继续执行循环
break;
}
}
};
}
};
</script>
<body>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="checkedAllBtn" value="全 选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="checkedRevBtn" value="反 选" />
<input type="button" id="sendBtn" value="提 交" />
</form>
</body>
</html>
