实例代码:
1 JS代码:
<script type="text/javascript">
window.οnlοad=function(){
function myClick(id,fun){
var btn=document.getElementById(id);
btn.οnclick=fun;
}
var check=document.getElementsByName("items");
var btn=document.getElementById("checkAllBox");
myClick("checkAllBox",function(){
for(var i=0;i<check.length;i++){
check[i].checked=this.checked;
}
});
myClick("checkAllBtn",function(){
for(var i=0;i<check.length;i++){
check[i].checked=true;
}
if(!btn.checked){
btn.checked=true;
}
});
myClick("checkNoBtn",function(){
for(var i=0;i<check.length;i++){
check[i].checked=false;
}
if(btn.checked){
btn.checked=false;
}
});
myClick("checkRevBtn",function(){
btn.checked=true;
for(var i=0;i<check.length;i++){
check[i].checked=!check[i].checked;
if(!check[i].checked){
btn.checked=false;
}
}
});
for(var i=0;i<check.length;i++){
check[i].οnclick=function(){
btn.checked=true;
for(var j=0;j<check.length;j++){
if(!check[j].checked){
btn.checked=false;
break;
}
}
};
}
};
</script>
2 HTML代码:
<form method="post" action="">
你爱好的运动是?<input type="checkbox" id="checkAllBox">全选/全不选
<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="checkAllBtn" value="全选">
<input type="button" id="checkNoBtn" value="全不选">
<input type="button" id="checkRevBtn" value="反选">
<input type="button" id="sendBtn" value="提交">
</form>
运行代码后,即可实现 全选/全不选 反选等操作。