当前位置：Gxlcms > JavaScript > 将多选框选中时打勾的颜色_表单特效

将多选框选中时打勾的颜色_表单特效

时间：2021-07-01 10:21:17 帮助过：21人阅读

<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 全选注:如需引入外部Js需刷新才能执行]

人气教程排行