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