您當(dāng)前位置：首頁 > web前端 > jscript > 用JavaScript更改input中radio和checkbox樣式

用JavaScript更改input中radio和checkbox樣式

來源：程序員人生發(fā)布時(shí)間：2014-04-07 09:34:49 閱讀次數(shù)：2985次

　　隨著前端技術(shù)的進(jìn)步和發(fā)展，傳統(tǒng)的表單樣式已經(jīng)不能滿足需求，由于美觀上的要求，網(wǎng)上現(xiàn)在出現(xiàn)了很多的這種表單美化插件。上網(wǎng)搜了一下，還真的不少，不過都沒怎么用，我不喜歡在網(wǎng)頁的頭部加載一群js，有的網(wǎng)頁頭部這樣的標(biāo)簽排列很長，很多的js一起加載進(jìn)來，之間可能會(huì)出現(xiàn)bug不說，就是當(dāng)初更改起來也不是很方便。

　　插件有插件的好處，有它的便捷性。如果為了效率，使用插件值得考慮。如果是為了研究學(xué)習(xí)，建議還是自己寫比較好。下面寫了一個(gè)簡單的radio和checkbox的美化程序。

<!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="url(/uploads/allimg/0911/input_style.gif) no-repeat -15px 0px";if(obj.type=="checkbox"){obj.parentNode.style.background="url(/uploads/allimg/0911/input_style.gif) no-repeat -15px -15px";}if(type){obj.parentNode.style.background="url(/uploads/allimg/0911/input_style.gif) no-repeat 0px 0px";if(obj.type=="checkbox"){obj.parentNode.style.background="url(/uploads/allimg/0911/input_style.gif) no-repeat 0px -15px";}}}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>復(fù)選框樣式：</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><br /><center>如不能顯示效果，請(qǐng)按Ctrl+F5刷新本頁，更多網(wǎng)頁代碼：<a href='http://www.vxbq.cn/' target='_blank'>http://www.vxbq.cn/</a></center>
提示：可修改后代碼再運(yùn)行!

　　HTML代碼：

單選：
<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>

多選：
<span><input type="checkbox" name="hobby" checked="checked" id="hobby1" /></span><label for="hobby1">xhtml</label>
<span><input type="checkbox" name="hobby" id="hobby2" /></span><label for="hobby2">CSS</label>
<span><input type="checkbox" name="hobby" id="hobby3" /></span><label for="hobby3">Javascript</label>
<span><input type="checkbox" name="hobby" id="hobby4" /></span><label for="hobby4">Flash</label>
<span><input type="checkbox" name="hobby" id="hobby5" /></span><label for="hobby5">Ajax</label>
<span><input type="checkbox" name="hobby" id="hobby6" /></span><label for="hobby6">AS</label>
<span><input type="checkbox" name="hobby" id="hobby7" /></span><label for="hobby7">Flex</label>
<span><input type="checkbox" name="hobby" id="hobby8" /></span><label for="hobby8">PHP/.NET/JSP</label>

Javascript部分代碼：

CSS部分：

.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;}

其實(shí)原理很簡單，就是讓input透明度變?yōu)?，然后給input添加一個(gè)背景，當(dāng)鼠標(biāo)選擇的時(shí)候，更換其背景為選中狀態(tài)即可

稍做了一下改動(dòng)，可以控制樣式是否加載：

<!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" /><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;}.button{ width:600px; text-align:center; margin:0px auto;}</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="url(/uploads/allimg/0911/input_style.gif) no-repeat -15px 0px";if(obj.type=="checkbox"){obj.parentNode.style.background="url(/uploads/allimg/0911/input_style.gif) no-repeat -15px -15px";}if(type){obj.parentNode.style.background="url(/uploads/allimg/0911/input_style.gif) no-repeat 0px 0px";if(obj.type=="checkbox"){obj.parentNode.style.background="url(/uploads/allimg/0911/input_style.gif) no-repeat 0px -15px";}}}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)}}}}}}function addevent(){gettag("input",getid("button"))[0].onclick=function(){this.value="去除樣式";this.onclick=removeevent;radio_style();};}function removeevent(){var r=gettag("input");for(var i=0;i<r.length;i++){if(r[i].type=="radio"||r[i].type=="checkbox"){r[i].style.opacity=100;r[i].style.filter="alpha(opacity=100)";r[i].onclick=function(){}r[i].parentNode.style.background="none";}}gettag("input",getid("button"))[0].value="加載樣式";gettag("input",getid("button"))[0].onclick=function(){this.value="去除樣式";this.onclick=removeevent;radio_style();};}addLoadEvent(addevent);</script><title>利用javascript自定義radio及checkbox樣式</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>復(fù)選框樣式：</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><div class="button" id="button"><input type="button" value="加載樣式" /></div></body></html><br /><center>如不能顯示效果，請(qǐng)按Ctrl+F5刷新本頁，更多網(wǎng)頁代碼：<a href='http://www.vxbq.cn/' target='_blank'>http://www.vxbq.cn/</a></center>

提示：可修改后代碼再運(yùn)行!

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

用JavaScript更改input中radio和checkbox樣式