利用JavaScript更改input中radio和checkbox樣式

更新時間：2009年11月24日 02:17:51 作者：

利用JavaScript更改input中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> <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() {//3設置樣式 if (gettag("input")) { var r = gettag("input"); function select_element(obj, type) {//1設置背景圖片 obj.parentNode.style.background = "url(/upload/2009-11/20091124021750277.gif) no-repeat -15px 0px"; if (obj.type == "checkbox") { obj.parentNode.style.background = "url(/upload/2009-11/20091124021750277.gif) no-repeat -15px -15px"; } if (type) { obj.parentNode.style.background = "url(/upload/2009-11/20091124021750277.gif) no-repeat 0px 0px"; if (obj.type == "checkbox") { obj.parentNode.style.background = "url(/upload/2009-11/20091124021750277.gif) no-repeat 0px -15px"; } } } //1 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)";//隱藏真實的checkbox和radio 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() {//2處理未選中 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) } } } } //2 } } //3 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   id="wvgjmd1"   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   id="idgiioj"   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> <div   id="4q6ya6a"   class="button" id="button"> <input type="button" value="加載樣式" /></div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

Ctrl + Enter提交前檢測的代碼
Ctrl + Enter提交前檢測的代碼...
2006-08-08
定義select的邊框顏色
如何定義select的邊框顏色解決思路：學習了clip和margin屬性的用法，利用它們的特點，很容易就得出答案。
2008-04-04
input、button的不同type值在ajax提交表單時導致的陷阱
最近在公司的項目中嘗試著利用YUI來實現各種效果。
2009-02-02
js顏色選擇器代碼[firefox不支持]
非常不錯的，顏色選擇效果代碼
2008-11-11
一個判斷email合法性的函數[非正則]
沒用到正則，看起來這個函數的準確度還是比較高的。
2008-12-12
js限制textarea每行輸入字符串長度的代碼
text通常我們可以直接用maxlength屬性來控制輸入的字符會長度
2012-10-10
css+js實現select列表橫向排列效果代碼
真不錯的select橫排效果代碼，推薦大家閱讀，這個思路真不錯，太感謝作者了
2008-06-06
js限制輸入框可輸入字節(jié)數代碼
javascript 字節(jié)長度限制輸入實現代碼，也算個不錯的方法，腳本之家以前曾發(fā)布過類型的功能代碼。
2010-01-01
關于腳本操作文本域的問題
關于腳本操作文本域的問題...
2007-04-04
FileUpload 控件禁止手動輸入或粘貼的實現代碼
FileUpload 控件禁止手動輸入或粘貼的實現代碼，經常用于比較安全無誤的輸入，例如身份證號碼，密碼，銀行賬戶等。
2010-04-04