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

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

Javascript: 实用的JS表单验证提示效果; CSS 直方图布局示例; jquery 动态调整textarea高度; jquery animate 动画效果使用说明; jquery checkbox全选反选效果代码; jquery (show,fadeOut,Animate)简单效果; JavaScript 抽奖效果实现代码数字跳动版; javascript Math.random()随机数函数; jQuery 加上最后自己的验证; JavaScript 自动分号插入（JavaScript synat:auto semicolon insertion）; 兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3); javascript 打印内容方法小结; jQuery toggle()设置CSS样式; javaScript parseInt字符转化为数字函数使用小结; 模仿JQuery sortable效果代码有错但值得看看; javascript 常见的闭包问题的解决办法; 在js中单选框和复选框获取值的方式; 按键盘方向键翻页跳转的javascript代码(支持ie,firefox); js 操作table之移动TR位置兼容FF 跟 IE; csdn 论坛技术区平均给分功能

No. « ‹ 271 272 273 274 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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样式