转载自：http://www.wxwdesign.cn/article/works/javascript_changestyle_radio_checkbox.htm
本文涉及到的图片
男 女
boy girl
<!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>
<base href="http://www.wxwdesign.cn/works/" />
<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(input_style.gif) no-repeat -15px 0px";
if (obj.type == "checkbox") {
obj.parentNode.style.background = "url(input_style.gif) no-repeat -15px -15px";
}
if (type) {
obj.parentNode.style.background = "url(input_style.gif) no-repeat 0px 0px";
if (obj.type == "checkbox") { obj.parentNode.style.background = "url(input_style.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 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>
<div class="button" id="button">
<input type="button" value="加载样式" /></div>
</body>
</html>
提供一种思路可以解决同样的问题，有兴趣的朋友可以试试：
利用CSS的clip 属性剪裁绝对定位元素
Object.style.clip=rect(top,right,bottom,left)|auto
例：document.getElementById("img1").style.clip="rect(0px,50px,50px,0px)";
用CSS定义时和下面类似：
img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。