代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
<script>
window.onload=function(){
var oBtn1=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
var oBtn3=document.getElementById('btn3');
var oDiv=document.getElementById('div1');
var aCh=document.getElementsByTagName("input");
//点击全选按钮后,全部选中
oBtn1.onclick=function()
{
for(var i=0;i<aCh.length;i++)
aCh[i].checked=true;
}
//点击不选按钮后,选择全部取消
oBtn2.onclick=function()
{
for(var i=0;i<aCh.length;i++)
aCh[i].checked=false;
}
//点击反选按钮后,选择项取消,未被选择项选择
//注意if语句里使用的是双等号,属于判断
//其他语句里是单等,属于赋值
oBtn3.onclick=function()
{
for(var i=0;i<aCh.length;i++)
if(aCh[i].checked==true)
{
aCh[i].checked=false;
}else{
aCh[i].checked=true;
}
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="全选"/>
<input id="btn2" type="button" value="不选"/>
<input id="btn3" type="button" value="反选"/>
<div id="div1">
<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 id="btn"></div>
</div>
</body>
</html>