<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="generator" content="editplus">
<meta name="author" content="dron">
<meta name="keywords" content="dron">
<meta name="description" content="dron">
<style type="text/css">
body
{
font-size:12px;
}
.checkbox
{
width:12px;
height:12px;
background-image:url(http://ucren.com/files/WebTex/setCheckbox/images/checkbox.gif);
background-color:#fff;
line-height:1px;
font-size:1px;
}
</style>
</head>
<body>
<div class="checkbox"></div>
<div class="checkbox"></div>
<div class="checkbox" checked=true></div>
<div class="checkbox"></div>
<div class="checkbox" checked=true></div>
<div>将多选框选中时打勾的颜色设为：<input type="text" size="7" maxlength="7" value="#0000ff" id="colorValue"><input type="button" value="试试" onclick="setActColor(document.getElementById('colorValue').value)">（注：颜色值可以自行更改）</div>
<script type="text/javascript">
/*******************************************\
自定义 checkbox 打勾颜色的例子
This JavaScript was writen by Dron.
@2003-2008 Ucren.com All rights reserved.
\*******************************************/
var actColor = "#f00";
var divs = document.getElementsByTagName("div");
for(var i=0;i<divs.length;i++)
{
if(divs[i].className=="checkbox")
{
divs[i].onclick = function()
{
var tempvalue = this.getAttribute("checked") ? '' : true;
this.setAttribute("checked",tempvalue);
return setcheck();
}
}
}
function setcheck()
{
var divs = document.getElementsByTagName("div");
for(var i=0;i<divs.length;i++)
{
if(divs[i].className=="checkbox"&&divs[i].getAttribute("checked"))
{
divs[i].style.backgroundColor = actColor;
}
if(divs[i].className=="checkbox"&&(!divs[i].getAttribute("checked")))
{
divs[i].style.backgroundColor = "#fff";
}
}
}
function setActColor(str)
{
var body = document.body;
try
{
body.style.color = str;
body.style.color = "#000";
}
catch(e)
{
window.alert("填定了错误的颜色值。");
return;
}
actColor = str;
return setcheck();
}
setcheck();
</script>
</body>
</html>