用htc实现CHECKBOX控件

复制代码 代码如下:
/* 
描述:        CHECKBOX控件 
版本:        1.1 
备注:        CHECKBOX控件背后跟随的文字 
            是获取CHECKBOX对象的htc_myLabel来显示的 
            更新添加indeter属性,用来增加不确定的选择 
*/ 
<public:component> 
<public:attach event="oncontentready" onevent="fnInit()" /> 
<public:attach event="onpropertychange" onevent="fnPropertychange()" /> 
<script language="Javascript"> 
var checkBoxImg=window.document.createElement("IMG"); 
ImageArray=[]; 
ImageArray["checkbox_false"]="checkbox_false.gif"; 
ImageArray["checkbox_false_down"]="checkbox_false_down.gif"; 
ImageArray["checkbox_false_over"]="checkbox_false_over.gif"; 
ImageArray["checkbox_true"]="checkbox_true.gif"; 
ImageArray["checkbox_true_down"]="checkbox_true_down.gif"; 
ImageArray["checkbox_true_over"]="checkbox_true_over.gif"; 
ImageArray["checkbox_indeter"]="checkbox_indeter.gif"; 
ImageArray["checkbox_indeter_down"]="checkbox_indeter_down.gif"; 
ImageArray["checkbox_indeter_over"]="checkbox_indeter_over.gif"; 
function preLoad(path,obj){ 
    for(i in obj){ 
        this[i]=new Image(); 
        this[i].src=path+obj[i]; 
        } 
    return this; 
    } 
preb=new preLoad("images/",ImageArray); 
function fnInit(){ 
    var o=element; 
    if(o.type=="checkbox"){ 
        var _table=window.document.createElement("TABLE"); 
        _table.cellSpacing="0px"; 
        _table.cellPadding="0px"; 
        _table.border="0px"; 
        if(o.disabled){ 
            _table.style.filter="alpha(Opacity=50)"; 
            } 
        else{ 
            _table.style.filter=""; 
            } 
        _table.style.display="inline"; 
        var _tr=_table.insertRow(); 
        var _td=_tr.insertCell(); 
        if (o.checked){ 
            checkBoxImg.src=preb["checkbox_true"].src; 
            } 
        else{ 
            checkBoxImg.src=preb["checkbox_false"].src; 
            } 
        if(o.indeter=="true"){ 
            o.indeterminate="true"; 
            checkBoxImg.src=preb["checkbox_indeter"].src; 
            } 
        _td.appendChild(checkBoxImg); 
        _td=_tr.insertCell(); 
        _td.style.verticalAlign="bottom"; 
        if(o.htc_myLabel){ 
            _td.innerHTML=" <label style='cursor: hand'>"+o.htc_myLabel+"</label>"; 
            } 
        o.insertAdjacentElement("afterEnd",_table); 
        o.style.display="none"; 
        _table.attachEvent("onmouseover",function(){Baction("over")}); 
        _table.attachEvent("onmouseout",function(){Baction("out")}); 
        _table.attachEvent("onmousedown",function(){Baction("down")}); 
        _table.attachEvent("onmouseup",function(){Baction("up")}); 
        _table.attachEvent("onclick",function(){fnClick()}); 
        } 
    } 
function fnPropertychange(){ 
    var o=element; 
    switch(event.propertyName.toString().toLowerCase()){ 
        case "checked": 
            Baction("up"); 
            break; 
        } 
    } 
function fnClick(){ 
    var o=element; 
    if(o.type=="checkbox"){ 
        if(o.disabled)return; 
        if(o.checked){ 
            checkBoxImg.src=preb["checkbox_false"].src; 
            } 
        else{ 
            checkBoxImg.src=preb["checkbox_true"].src; 
            } 

        o.checked=!o.checked; 
        } 
    } 
function Baction(action){ 
    var o=element; 
    if(o.type=="checkbox"){ 
        if(o.disabled)return; 
        if(action=="up"||action=="over"){ 
            if(o.indeterminate){ 
                checkBoxImg.src=preb["checkbox_indeter_over"].src; 
                } 
            else if(o.checked){ 
                checkBoxImg.src=preb["checkbox_true_over"].src; 
                } 
            else{ 
                checkBoxImg.src=preb["checkbox_false_over"].src; 
                } 
            } 
        if(action=="out"){ 
            if(o.indeterminate){ 
                checkBoxImg.src=preb["checkbox_indeter"].src; 
                } 
            else if(o.checked){ 
                checkBoxImg.src=preb["checkbox_true"].src; 
                } 
            else{ 
                checkBoxImg.src=preb["checkbox_false"].src; 
                } 

            } 
        if(action=="down"){ 
            if(o.indeterminate){ 
                checkBoxImg.src=preb["checkbox_indeter_down"].src; 
                } 
            else if(o.checked){ 
                checkBoxImg.src=preb["checkbox_true_down"].src; 
                } 
            else{ 
                checkBoxImg.src=preb["checkbox_false_down"].src; 
                } 
            o.indeterminate=false; 
            } 
        } 
    } 
</script> 
</public:component>

测试例子:
复制代码 代码如下:
<html> 
<head> 
<title> 新文档 </title> 
<meta name="Generator" content="EditPlus"> 
<meta name="Author" content="FlashSoft"> 
<meta name="Keywords" content=""> 
<meta name="Description" content="FlashSoft"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<style type="Text/Css"> 

input.checkbox{ 
    behavior:url("behaviors/checkbox.htc");cursor: hand; 
    } 

</style> 
</head> 
<body> 
<input name="chk1" type="checkbox" class="checkbox" htc_myLabel="音乐" checked> 
<input name="chk1" type="checkbox" class="checkbox" htc_myLabel="体育" disabled> 
<input name="chk1" type="checkbox" class="checkbox" htc_myLabel="新闻"> 
<input name="chk1" type="checkbox" class="checkbox" htc_myLabel="不确定属性1" indeter="true" checked> 
<input name="chk1" type="checkbox" class="checkbox" htc_myLabel="不确定属性2" indeter="true" disabled> 
<input name="chk1" type="checkbox" class="checkbox" htc_myLabel="不确定属性3" indeter="true"> 
</body> 
</html>