自定义radio , checkbox背景
今天偶尔一个私单谈的时候问了下，我能不能实现，模拟单选，复选的效果
我现在的JS水平还没到写各种模拟的效果，因为不想牵涉图片加载，然后我就直接用的背景颜色，需要图片的直接改下JS就OK 啦。
然后当时那个着急，然后问问朋友，特整理代码如下：
利用javascript自定义radio及checkbox样式 - liehuo.net
单选框样式：
<!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=GBK" />
<style type="text/css">
body{ margin:0px; padding:0px; font-size:13px;}
.input_style{ padding:6px 0px; width:600px; margin:0px auto; border-bottom:#666666 1px dotted;}
.input_style span{display:inline-block; width:15px; height:15px; text-align:left; vertical-align:middle; _overflow:hidden;}
.input_style label{ padding:0px 6px; cursor:pointer;}
.input_style input{ cursor:pointer;}
.checkbox{padding:0px; list-style:none; width:600px; margin:6px auto; height:auto; overflow:hidden;}
.checkbox li{ padding:3px 0px; float:left;}
h4{ width:600px; margin:0px auto; margin-top:30px;}
</style>
<script language="javascript" type="text/javascript">
function getid(id){return document.getElementById(id);}
function gettag(tag,obj){if(obj){return obj.getElementsByTagName(tag)}else{return document.getElementsByTagName(tag)}}
function addLoadEvent(func){var oldonload=window.onload;if(typeof window.onload!="function"){window.onload=func;}else{window.onload=function(){oldonload();func();}};}
function radio_style(){
if(gettag("input")){
var r=gettag("input");
function select_element(obj,type){
obj.parentNode.style.background="#f7f";
if(obj.type=="checkbox"){obj.parentNode.style.background="#ccc";}
if(type){obj.parentNode.style.background="#000";if(obj.type=="checkbox"){obj.parentNode.style.background="#ff6000";}}
}
for(var i=0;i<r.length;i++){
if(r[i].type=="radio"||r[i].type=="checkbox"){
r[i].style.opacity=0;r[i].style.filter="alpha(opacity=0)";
r[i].onclick=function(){select_element(this);unfocus();}
if(r[i].checked==true){select_element(r[i]);}else{select_element(r[i],1);}
}
}
function unfocus(){
for(var i=0;i<r.length;i++){
if(r[i].type=="radio"||r[i].type=="checkbox"){if(r[i].checked==false){select_element(r[i],1)}}
}
}
}
}
addLoadEvent(radio_style);
</script>
<title>利用javascript自定义radio及checkbox样式 - liehuo.net</title>
</head>
<body>
<h4>单选框样式：</h4>
<div class="input_style">
<span><input type="radio" name="sex" value="boy" checked="checked" id="sex_boy" /></span><label for="sex_boy">男</label>
<span><input type="radio" name="sex" value="girl" id="sex_girl" /></span><label for="sex_girl">女</label>
</div>
<div class="input_style">
<span><input type="radio" name="marry" value="yes" id="marry_yes" /></span><label for="marry_yes">boy</label>
<span><input type="radio" name="marry" value="not" checked="checked" id="marry_not" /></span><label for="marry_not">girl</label>
</div>
<h4>复选框样式：</h4>
<ul class="checkbox input_style">
<li><span><input type="checkbox" name="hobby" checked="checked" id="hobby1" /></span><label for="hobby1">xhtml</label></li>
<li><span><input type="checkbox" name="hobby" id="hobby2" /></span><label for="hobby2">CSS</label></li>
<li><span><input type="checkbox" name="hobby" id="hobby3" /></span><label for="hobby3">Javascript</label></li>
<li><span><input type="checkbox" name="hobby" id="hobby4" /></span><label for="hobby4">Flash</label></li>
<li><span><input type="checkbox" name="hobby" id="hobby5" /></span><label for="hobby5">Ajax</label></li>
<li><span><input type="checkbox" name="hobby" id="hobby6" /></span><label for="hobby6">AS</label></li>
<li><span><input type="checkbox" name="hobby" id="hobby7" /></span><label for="hobby7">Flex</label></li>
<li><span><input type="checkbox" name="hobby" id="hobby8" /></span><label for="hobby8">PHP/.NET/JSP</label></li>
</ul>
<ul class="checkbox input_style">
<li><span><input type="checkbox" name="hobby" checked="checked" id="hobby9" /></span><label for="hobby9">了解</label></li>
<li><span><input type="checkbox" name="hobby" id="hobby10" /></span><label for="hobby10">一般</label></li>
<li><span><input type="checkbox" name="hobby" id="hobby11" /></span><label for="hobby11">熟练</label></li>
<li><span><input type="checkbox" name="hobby" id="hobby12" /></span><label for="hobby12">精通</label></li>
<li><span><input type="checkbox" name="hobby" id="hobby13" /></span><label for="hobby13">资深专家</label></li>
</ul>
</body>
</html>
