<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#op{margin:5px 0;width:55px;height:20px;background:#f1f1f1;border:1px solid #999; font-size:12px; position:absolute;top:5px;}
img{ cursor:pointer;}
#op ul{margin:0; padding:0;width:100%;border:1px solid #00f;cursor:pointer; background:#fff;list-style:none;display:none;}
#op ul li{;text-align:center; line-height:20px;}
.oinput{width:20px;}
</style>
<script type="text/javascript">
window.onload=function ()
{
var oIn1=document.getElementById('in1');
var oImg=document.getElementsByTagName('img')[0];
var oUl=document.getElementsByTagName('ul')[0];
var oli=document.getElementsByTagName('li');
var oInput=document.getElementsByTagName('input');
var i=0
oImg.onclick=function()
{
if(oUl.style.display=='block')
{
oUl.style.display='none'
}
else
{
oUl.style.display='block'
}
};
oli[0].onclick=function()
{
for(i=1;i<oInput.length;i++)
{
oInput[i].checked=true;
};
};
oIn1.onclick=function()
{
for(i=1;i<oInput.length;i++)
{
oInput[i].checked=oIn1.checked;
};
};
oli[1].onclick=function()
{
for(i=1;i<oInput.length;i++)
{
oInput[i].checked=false;
};
};
oli[2].onclick=function()
{
for(i=1;i<oInput.length;i++)
{
oInput[i].checked=!oInput[i].checked;
};
};
};
</script>
</head>
<body>
<br />
<div id="op">
<input id="in1" type="checkbox" /><img src="images/004.jpg" style=" margin:8px;float:right;">
<ul>
<li>全选</li>
<li>全不选</li>
<li>反选</li>
</ul>
</div>
<hr>
<div class="oinput">
<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
</body>
</html>