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

274 阅读 0 评论 181 点赞

我是靠谱客的博主想人陪身影，这篇文章主要介绍利用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>

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

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