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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 利用JavaScript更改input中radio和checkbox样式

Javascript: ExtJS 2.0实用简明教程之ExtJS版的Hello; ExtJS 2.0 实用简明教程之布局概述; ExtJS 2.0实用简明教程之应用ExtJS; ExtJS 2.0实用简明教程之获得ExtJS; javascript 扫雷游戏; ExtJS 2.2.1的grid控件在ie6中的显示问题; jquery-1.2.6得到焦点与失去焦点的写法; 一组JS创建和操作表格的函数集合; extjs fckeditor集成代码; jquery 实现京东商城、凡客商城的图片放大效果; jQuery 技巧大全(新手入门篇); JavaScript设置FieldSet展开与收缩; event.keyCode键码值表附只能输入特定的字符串代码; js 图片缩放特效代码; jquery(1.3.2) 高亮选中图片边框; js 使用方法与函数总结; Js 本页面传值实现代码; javascript获取div的内容精华篇; innerText innerHTML的用法以及注意事项 [推荐]; jquery 圆角遮罩图片实现图片圆角

No. « ‹ 218 219 220 221 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 375 ::

收藏到网摘: n/a

JS 实现双色表格实现代码 jquery.ui.draggable中文文档

利用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 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 实现双色表格实现代码 jquery.ui.draggable中文文档

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

评论 (0) All

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