利用JavaScript更改input中radio和checkbox样式
作者：bea
本文涉及到的图片 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;vertic
本文涉及到的图片
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;
}
<!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 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需刷新才能执行]
有用 | 无用
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;
}
<!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 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需刷新才能执行]
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- JS 拖动效果实现代码 比较简单
- jquery.ui.progressbar 中文文档
- JavaScript 地震特效
- javascript 面向对象继承
- javascript 获取元素位置的快速方法 getBoundingClientRect()
- javascript或asp实现的判断身份证号码是否正确两种验证方法
- Ext grid 添加右击菜单
- JS 判断undefined的实现代码
- 鼠标跟随的文字变动效果
- js版扫雷实现代码 原理不错
- 为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
- 为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
- JavaScript让IE浏览器event对象符合W3C DOM标准
- 文本框的字数限制功能jquery插件
- js数字输入框(包括最大值最小值限制和四舍五入)
- jquery ajax提交表单数据的两种方式
- JS 倒计时实现代码(时、分，秒)
- js loading加载效果实现代码
- jquery.ui.draggable中文文档