<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="application/xhtml+xml; charset=gb2312" /> <meta http-equiv="content-language" content="zh-cn" /> <meta name="robots" content="all" /> <meta name="keywords" content="关键字描述" /> <meta name="description" content="站点描述" /> <meta name="author" content="顾振宇,zy.e@163.com" /> <meta name="copyright" content="版权所有" /> <link rel="shortcut icon" href="/favicon.ico" mce_href="favicon.ico" type="image/x-icon" /> <link rel="bookmark" href="/favicon.ico" mce_href="favicon.ico" type="image/x-icon" /> <title></title> <mce:style type="text/css"><!-- *{margin:0;padding:0;} img{border:0;} body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif,宋体;}li{list-style:none;} .clearfix:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}.clearfix{*display:inline-block;} .br{ word-break: break-all; word-wrap: break-word;} /*在IE中实行强制换行*/ a:link{ color:#000; text-decoration:none; } a:visited{ color:#000; text-decoration:none; } a:hover{ color:#000; text-decoration:underline; } .selbox label{ margin: 10px; display: block; position: relative; background: url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/checkbox.gif) 0 1px no-repeat; height: 14px; float: left; overflow: hidden; line-height: 14px;} .labelbgup{ background: url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/checkbox.gif) 0 -12px no-repeat!important; } .selbox label input{margin-right: 4px; *margin:0 0 -5px -4px; padding: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /*IE8*/ filter:alpha(opacity=0); /*IE5、IE5.5、IE6、IE7*/ opacity: 0; /*Opera9.0+、Firefox1.5+、Safari、Chrome*/} --></mce:style><style type="text/css" mce_bogus="1">*{margin:0;padding:0;} img{border:0;} body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif,宋体;}li{list-style:none;} .clearfix:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}.clearfix{*display:inline-block;} .br{ word-break: break-all; word-wrap: break-word;} /*在IE中实行强制换行*/ a:link{ color:#000; text-decoration:none; } a:visited{ color:#000; text-decoration:none; } a:hover{ color:#000; text-decoration:underline; } .selbox label{ margin: 10px; display: block; position: relative; background: url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/checkbox.gif) 0 1px no-repeat; height: 14px; float: left; overflow: hidden; line-height: 14px;} .labelbgup{ background: url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/checkbox.gif) 0 -12px no-repeat!important; } .selbox label input{margin-right: 4px; *margin:0 0 -5px -4px; padding: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /*IE8*/ filter:alpha(opacity=0); /*IE5、IE5.5、IE6、IE7*/ opacity: 0; /*Opera9.0+、Firefox1.5+、Safari、Chrome*/}</style> </head> <body> <div id="click" class="selbox"> <label><input type="checkbox" value="" />谷歌</label> <label><input type="checkbox" value="" />不错</label> <label><input type="checkbox" value="" />百度</label> <label><input type="checkbox" value="" />郁闷</label> </div> <script type="text/javascript"><!-- var clickbox = document.getElementById("click"); var labels = clickbox.getElementsByTagName("label"); var inputs = clickbox.getElementsByTagName("input"); for(i = 0; i < inputs.length; i++) { inputs[i].num = i; inputs[i].onclick = show; } function show() { var x = labels[this.num].className; if(x) { labels[this.num].className = "" } if(!x) { labels[this.num].className = "labelbgup" } } // --></script> </body> </html>
<script type="text/JavaScript"> </script>
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]