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

本文涉及到的图片

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

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

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

利用javascript自定义radio及checkbox样式

单选框样式：

男

女

boy

girl

复选框样式：

• xhtml
• CSS
• Javascript
• Flash
• Ajax
• AS
• Flex
• PHP/.NET/JSP

• 了解
• 一般
• 熟练
• 精通
• 资深专家

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]