全选按钮的制作按钮特效__脚本特效_后台技术飞飞Asp技术乐园

全选按钮的制作

时间： 2008-03-26 23:59:57　阅读次数：2896

全选按钮的制作

<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>ID编号</title>
<style>
.back0{
background:#ddd;
}
.back1{
font-weight:bold;
}
.back2{
background:#ff0;
}
.back3{
background:#9f9;
}
.back4{
background:#dd0;
}
ul{
width:244px;height:20px;
margin: 0;
padding: 0;
border-bottom:1px #eee solid;
font-size:12px;
CURSOR: pointer;
background:#fff
}
li{
margin: 0;
padding: 0;padding-left:7px;
list-style-type:none;
}
li.sp1{
width:24px;text-align:center;FLOAT: left;
}
li.sp2{
width:75px;text-align:center;FLOAT: left;padding-top:4px;
}
li.sp3{
width:137px;text-align:center;padding-top:4px;
}
</style>
</head>
<body>
    	<ul class="back1 back0" id="ul0">
	      <li class="sp1"><input type="checkbox" id="checkbox" name="checkbox" value="checkbox"  /></li>
	      <li class="sp2">ID编号</li>
	      <li class="sp3">用户名</li>
	    </ul>
    	<ul>
	      <li class="sp1"><input type="checkbox" id="checkbox" name="checkbox" value="checkbox" /></li>
	      <li class="sp2">1</li>
	      <li class="sp3">ertret</li>
	    </ul>
    	<ul>
	      <li class="sp1"><input type="checkbox" id="checkbox" name="checkbox" value="checkbox" /></li>
	      <li class="sp2">2</li>
	      <li class="sp3">hgtyyyytty</li>
	    </ul>
    	<ul>
	      <li class="sp1"><input type="checkbox" id="checkbox" name="checkbox" value="checkbox" /></li>
	      <li class="sp2">3</li>
	      <li class="sp3">43f56yyh</li>
	    </ul>
<script>
var obj=document.getElementsByTagName("ul")
	for(var i=0;i<obj.length;i++){
		obj[i].onmouseover=function(){checkv(this)}
		obj[i].onmouseout=function(){checku(this)}
		obj[i].onclick=function(){check_me(this)}
		obj[i].onclick=function(){check_me(this)}
		obj[i].childNodes[0].childNodes[0].onclick=function(){check_me(this.parentNode.parentNode)}
	}
function checkv(o){
	if (o.id=="ul0"){
		o.className= 'back1 back3'
	}
	else{
		o.className= 'back3'
	}
}
function checku(o){
	if (o.id=="ul0"){
		if(o.childNodes[0].firstChild.checked) o.className= 'back1 back4'
		else  o.className= 'back1 back0'
	}
	else{
		if(o.childNodes[0].firstChild.checked)o.className= 'back2'
		else o.className= ''
	}
}
function check_me(o){
	if (o.id=="ul0"){
		if(!o.childNodes[0].firstChild.checked){
			o.className='back1 back4'
			o.childNodes[0].firstChild.checked=true;
			for(var i=1;i<obj.length;i++){
				obj[i].className='back2'
				obj[i].childNodes[0].firstChild.checked=true;
			}
		}
		else {
			o.className='back1 back0'
			o.childNodes[0].firstChild.checked=false;
			for(var i=1;i<obj.length;i++){
				obj[i].className=''
				obj[i].childNodes[0].firstChild.checked=false;
			}
		}
	}
	else {
		if (obj[0].childNodes[0].firstChild.checked){
			obj[0].childNodes[0].firstChild.checked=false;
			obj[0].className= 'back1 back0'
		}
		check123(o)
	}
}
function check123(you){
		if(!you.childNodes[0].firstChild.checked){
			you.className='back2'
			you.childNodes[0].firstChild.checked=true;
		}
		else{
			you.className=''
			you.childNodes[0].firstChild.checked=false;
		}
}
</script>
</body>
</html>

提示：您可以先修改部分代码再运行