- 注意相互之间的逻辑关系
- 注意作用域的问题
- 有时候难以解决的问题可以试一下逆向思维
- 业务的逻辑性严密性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//获取四个多选按钮
var items = document.getElementsByName("items");
//获取全选框
var checkbox = document.getElementById("checkedAllBox");
//全选按钮
var checkedAllBox = document.getElementById("checkedAllBtn");
checkedAllBox.onclick = function(){
for(var i = 0;i<items.length;i++){
items[i].checked = true;
}
checkbox.checked = true;
};
//全不选函数
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function(){
for(var i = 0;i<items.length;i++){
items[i].checked = false;
}
checkbox.checked = false;
};
//反选按钮，点击以后选中的变灭选中
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function(){
for(var i = 0;i<items.length;i++){
/*if(items[i].checked){
items[i].checked = false;
}else{
items[i].checked = true;
}*/
items[i].checked = !items[i].checked;//取反
if(!items[i].checked){
checkbox.checked = false;
//一旦进入判断，则不用再继续进行循环
}
}
//在反选时也需要判断是否选中
};
//提交按钮
var sentBtn = document.getElementById("sendBtn");
sendBtn.onclick = function(){
for(var i = 0;i<items.length;i++){
/*alert("1");*/
if(items[i].checked ){
alert(items[i].value);
}
}
};
checkbox.onclick = function(){
for(var i = 0;i<items.length;i++){
//在事件的响应函数中，事件是给谁绑定的this就是谁
items[i].checked = this.checked;
}
};
for(var i = 0;i<items.length;i++){
items[i].onclick = function(){
//先默认值然后再对值进行改进
checkbox.checked = true;
for(var j = 0;j<items.length;j++){
if(!items[j].checked){
checkbox.checked = false;
//一旦进入判断，则不用再继续进行循环
}
}
};
};
};
</script>
</head>
<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>
