<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
window.onload=function(){
//定义一个单击响应函数
var myClick=function(nodeid,fun){
var nownode=document.getElementById(nodeid);
nownode.onclick=fun;
}
//给复选框绑定事件
var items=document.getElementsByName("items");
var allbtn=document.getElementById("checkedAllBox");
for (var i=0;i<items.length;i++) {
items[i].onclick=function(){
var statearray=document.getElementsByName("items");
allbtn.checked=true;
for (var i=0;i<statearray.length;i++) {
if(!statearray[i].checked){
allbtn.checked=false;
break;
}
}
};
}
//给全选复选框绑定事件
myClick("checkedAllBox",function(){
var itemarray=document.getElementsByName("items");
//alert(this);
for (var i=0;i<itemarray.length;i++) {
itemarray[i].checked=this.checked;
}
})
//给全选按钮绑定事件
myClick('checkedAllBtn',function(){
var itemarray=document.getElementsByName("items");
for (var i=0;i<itemarray.length;i++) {
itemarray[i].checked=true;
}
document.getElementById("checkedAllBox").checked=true;
})
//给全不选按钮绑定事件
myClick('checkedNoBtn',function(){
var itemarray=document.getElementsByName("items");
for (var i=0;i<itemarray.length;i++) {
itemarray[i].checked=false;
}
document.getElementById("checkedAllBox").checked=false;
})
//给反选按钮绑定事件
myClick('checkedRevBtn',function(){
var itemarray=document.getElementsByName("items");
var state=true;
for (var i=0;i<itemarray.length;i++) {
itemarray[i].checked=!itemarray[i].checked;
if (!itemarray[i].checked) {
state=false;
}
}
if(state){
document.getElementById("checkedAllBox").checked=true;
}else{
document.getElementById("checkedAllBox").checked=false;
}
});
//给提交按钮绑定事件
myClick('sendBtn',function(){
var itemarray=document.getElementsByName("items");
var jgtext="";
for (var i=0;i<itemarray.length;i++) {
if(itemarray[i].checked){
jgtext+=itemarray[i].value+" ";
}
}
if(jgtext ==""){
alert("没有选择任何选项");
return;
}
alert(jgtext);
})
}
</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>
