页面导航：首页 → 网络编程 → JavaScript → 表单特效 → 正文内容

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

发布：dxy 字体：[增加减小] 类型：转载

点击运行可以看到效果:

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

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

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

百度中搜索更多的关于将多选框选中时打勾的颜色内容，或者用Google搜索相关更多

浏览次数：载入中... 打印本文关闭本文返回首页

0

上一篇文章：动态改变textbox的宽高的js
下一篇文章：js下拉框里超过变成省略号

文章评论

共有位脚本之家网友发表了评论我来说两句

同类文章

最近更新

热点排行