<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<span style="font-size: 24px;">javascript 案例 全選 不選 反選</span><br />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>全選 不選 反選</title>
</head>
<script>
window.onload=function (){
var oBtn1=document.getElementById("Btn1");
var oBtn2=document.getElementById("Btn2");
var oBtn3=document.getElementById("Btn3");
var oDiv=document.getElementById("Ben");
var oInp=oDiv.getElementsByTagName("input");
oBtn1.onclick=function(){ //全選
//oInp[0].checked=true; // checked ： 布爾值 false true;
for(var i=0; i<oInp.length ; i++){
oInp[i].checked=true;
}
};
oBtn2.onclick=function(){ //不選
for(var i=0; i<oInp.length ; i++){
oInp[i].checked=false;
}
};
oBtn3.onclick=function(){ //反選
for(var i=0; i<oInp.length ; i++){
if(oInp[i].checked==true){
oInp[i].checked=false;
}
else{
oInp[i].checked=true;
}
}
};
};
</script>
<body>
<input id="Btn1" type="button" value="全選" /><br />
<input id="Btn2" type="button" value="不選" /><br />
<input id="Btn3" type="button" value="反選" /><br />
<div id="Ben">
<input type="checkbox" /><br />
<input type="checkbox" /><br /> <!--復選框 checked 選中-->
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
</div>
</body>
</html>
