将多选框选中时打勾的颜色

朱嘉华

浏览: 233218 次
性别:
来自: 北京

最近访客更多访客>>

ejunnet

elile

ya523587793

Pontus

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JavaScript

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

分享到：