今天偶尔一个私单谈的时候问了下,我能不能实现,模拟单选,复选的效果
我现在的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; 600px; margin:0px auto; border-bottom:#666666 1px dotted;} .input_style span{display:inline-block; 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; 600px; margin:6px auto; height:auto; overflow:hidden;} .checkbox li{ padding:3px 0px; float:left;} h4{ 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>