<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用图片模拟checkbox三种状态,图片checkbox和checkbox的联动</title>
<script language="javascript">

    //图片checkbox全选和全不选,控制两个checkbox的函数
    function img_cb_choose(){
        var value = document.getElementById("img_checkbox").value;                    //取出图片的值,通过这个值判断图片CheckBox的三个状态
        var checkbox_array = document.getElementsByName("checkbox1");        //取出checkbox数组数
        
        if(value == "default"){            //图片checkbox 如果是默认不选,就变成全选
            document.getElementById("img_checkbox").src = "images/all.gif";
            document.getElementById("img_checkbox").value = "all";
            choose(checkbox_array,false,true);
        }else if(value == "all"){    //图片checkbox 如果是全选,就变成不选
            document.getElementById("img_checkbox").src = "images/default.gif";
            document.getElementById("img_checkbox").value = "default";
            choose(checkbox_array,true,false);
        }else if(value == "half"){        //图片checkbox 如果是半选,就变成不选
            document.getElementById("img_checkbox").src = "images/default.gif";
            document.getElementById("img_checkbox").value = "default";
            choose(checkbox_array,true,false);
        }
    }
    
    //传入一个CheckBox,现在的状态,要改变的状态
    function choose(checkbox_array,new_status,status){
        for(i=0;i<checkbox_array.length;i++){                //循环所有数组
            if(checkbox_array[i].checked==new_status)        //现在checkbox的状态
            {
                checkbox_array[i].checked=status;            //改变后的状态
            }
        }
    }
    
    //checkbox 控制图片checkbox
    function change(){
        
        var img_checkbox = document.getElementsByName("img_checkbox");
        
        var checkbox_array = document.getElementsByName("checkbox1");        //取出checkbox数组
        var str_length = 0;        //选择checkbox的个数
        var checkbox_length = checkbox_array.length;    //数组的长度
        
        for(i=0;i<checkbox_length;i++){
            //alert(i);
//            alert(checkbox_array[i].value);
            if(checkbox_array[i].checked==true)
            {
                str_length++;
                //alert(checkbox_array[i].value);
                //alert(i);
            }
        }
//        alert(str_length);
        if(str_length==0){                                                //默认 全选
            document.getElementById("img_checkbox").src = "images/default.gif";
            document.getElementById("img_checkbox").value = "default";
        }else if(str_length<checkbox_length){                            //半选状态,点击后变成全不选.
            document.getElementById("img_checkbox").src = "images/half.gif";
            document.getElementById("img_checkbox").value = "half";
        }else if(str_length==checkbox_length){                            //全不选
            document.getElementById("img_checkbox").src = "images/all.gif";
            document.getElementById("img_checkbox").value = "all";
        }
    }
</script>
</head>

<body>
<div id="main">
    <div id="images_checkbox">
        <input id="img_checkbox" name="img_checkbox" type="image" src="images/default.gif" onclick="img_cb_choose();" value="default" />
    </div>
    <div>
        <input name="checkbox1" type="checkbox" value="1" onclick="change();" /><br />
        <input name="checkbox1" type="checkbox" value="2" onclick="change();" />
    </div>
</div>
</body>
</html>

posted on 2009-02-25 15:42  Dufe王彬  阅读(2148)  评论(1编辑  收藏  举报