简明现代魔法 -> JavaScript -> Checkbox 联动设计

Checkbox 联动设计

2010-05-31

程序演示

从运行效果中可以看到几个特点:

说明
Checkbox.class:用于事件过滤
Checkbox.id:   用于表示层次关系,子对象的ID = 父对象的标识
Checkbox.name: 用于保存对象的标识
简明现代魔法
PHP区
PHP文章1
PHP文章2
PHP文章的演示
Ajax区
Ajax文章1
CSS区
简单提交类型

  1. 普通的联动;
  2. 半选状态;
  3. 整个结构呈树型,下层节点的变动会反映为上层树节点的选取状态,提供半选状态是为了能够更加形象的表示,我非常不满意普通的联动只有"选取/不选"两种,而我在此提供"部分选取"的状态显示。

  4. 简化/完全提交的功能
  5. 提供一个表单用于显示公司各个部门的员工,而让你来选取合适的员工;

    非常多的情况下,操作者可能选取了一整个部门,而提交如果按员工来提交的话(完全提交),则提交的数据量会很大,而用这里的简化提交就不同了,提交上去的会是一个部门ID以及零散员工ID,在处理时根据ID特征的不同来处理,应该能很大提升处理效率。

JavaScript Code

<script language="javascript">
//特定的Checkbox类名前缀
var myClassName = "nowamagicCheck";
//特定的ID前缀
var myID = "ID";
//特定的Name前缀
var myName = "Name";

//页面事件过滤
function filter() 
{
    var Obj = window.event.srcElement;
    //过滤条件:
    //    .是个Checkbox控件
    //    .其类名前缀为指定类名
    if (Obj.type == "checkbox" && Obj.className.indexOf(myClassName,0) == 0)
	{
        down(Obj);
        up(Obj);
    }
	else
	{
        //show("");
    }
}
//向下处理子控件,使之与当前控件同步
//theObj:当前处理的控件对象
function down(theObj) 
{
    //设置当前控件的子控件同步
    //得到子控件:
    //    .ID前缀 + 当前控件有效ID(记录在Name属性中)
    var subObjects;
    var subObjectID;
    if(theObj != null) 
	{
        subObjectID = myID + theObj.name.substring(myName.length);
        subObjects = document.all(subObjectID);
        if(subObjects != null) 
		{
            //show(subObjectID + ":" + subObjects.length);
            if(subObjects.length) 
			{
                //一组子控件
                for(var i=0;i<subObjects.length;i++) 
				{
                    subObjects[i].checked = theObj.checked;
                    //向下递归
                    down(subObjects[i]);
                }
            }
			else
			{
                //单个控件
                subObjects.checked = theObj.checked;
            }
        }
    }
	else
	{
        return;
    }
}
//向上
function up(theObj) 
{
    var bortherObj;
    var parentObj;
    var parentObjName;
    var flag = 0;
    if((theObj != null) && (theObj.id.length > myID.length)) 
	{
        //得到父控件Name
        //    .Name前缀 + 当前控件的ID
        parentObjName = myName + theObj.id.substring(myID.length);
        parentObj = document.all(parentObjName);
        if(parentObj != null) 
		{
            bortherObj = document.all(theObj.id);
            if(bortherObj.length) 
			{
                //有平行的兄弟控件,检查条件:
                //    .checked值不同
                //    .中间有一个的indeterminate状态为真
                for(var i=0;i<bortherObj.length;i++) 
				{
                    if((bortherObj[i].checked != theObj.checked) || bortherObj[i].indeterminate || theObj.indeterminate) 
					{
                        flag = 1;
                        break;
                    }
                }
                if(flag == 0) 
				{
                    //兄弟伙的状态一致,且indeterminate状态为假
                    parentObj.checked = theObj.checked;
                    parentObj.indeterminate = false;
                }
				else
				{
                    parentObj.checked = true;
                    parentObj.indeterminate = true;
                }
            }
			else
			{
                //单独一个
                parentObj.checked = theObj.checked;
                parentObj.indeterminate = theObj.indeterminate;
            }
            //向上递归
            up(parentObj);
        }
		else
		{
            return;
        }
    }
	else
	{
        return;
    }
}

//得到Checkbox的值
//    .theObj:起始处的对象
//    .submitType:提交类型(0--完全;1--简化)
function getChkValue(theObj,submitType,result) 
{
    var ID = "";
    var subObjects;
    var subObjectID;
    if(theObj != null) 
	{
        if(theObj.indeterminate) 
		{
            //不确定状态
            //视同于未选择状态
        }
		else
		{
            //记录当前对象
            result += (theObj.checked?("," + theObj.name.substring(myName.length)):"");
            if(submitType == 1) 
			{
                //简化提交类型
                return result;
            }
			else
			{
                //完全提交类型
            }
        }
        //向下递归
        subObjectID = myID + theObj.name.substring(myName.length);
        subObjects = document.all(subObjectID);
        if(subObjects != null) 
		{
            if(subObjects.length) 
			{
                for(var i=0;i<subObjects.length;i++) 
				{
                    result = getChkValue(subObjects[i],submitType,result);
                }
            }
			else
			{
                result += (subObjects.checked?("," + subObjects.name.substring(myName.length)):"");
            }
        }
    }
	else
	{
        return result;
    }
    return result;
}

//提交用
function mySubmit() 
{
    var result = "";
    result = getChkValue(document.all("Name01"),(submitType.checked?0:1),result);
    if(result != "") 
	{
        result = result.substring(1);
    }
    show(result);
    return false;
}

//显示用
function show(msg) 
{
    document.all("show").value = msg;
}
document.onclick = filter;
</script>

    <table width="100%" cellspacing="0" cellpadding="0" style="font-family:Verdana, 宋体; font-size:12px;">
        <tr height="60pt">
            <td><pre id="readme">说明</pre></td>
        </tr>
        <tr height="60pt">
            <td>
<pre>
Checkbox.class:用于事件过滤
Checkbox.id:   用于表示层次关系,子对象的ID = 父对象的标识
Checkbox.name: 用于保存对象的标识
</pre>
			</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="nowamagicCheckRoot" id="ID" name="Name01">简明现代魔法</input></td>
        </tr>
        <tr>
        	<td style="text-indent:4em"><input type="checkbox" class="nowamagicCheck" id="ID01" name="Name0101">PHP区</input></td>
        </tr>
        <tr>
        	<td style="text-indent:8em"><input type="checkbox" class="nowamagicCheck" id="ID0101" name="Name010101">PHP文章1</input></td>
        </tr>
        <tr>
        	<td style="text-indent:8em"><input type="checkbox" class="nowamagicCheck" id="ID0101" name="Name010102">PHP文章2</input></td>
        </tr>
        <tr>
        	<td style="text-indent:12em"><input type="checkbox" class="nowamagicCheck" id="ID010102" name="Name01010201">PHP文章的演示</input></td>
        </tr>
        <tr>
        	<td style="text-indent:4em"><input type="checkbox" class="nowamagicCheck" id="ID01" name="Name0102">Ajax区</input></td>
        </tr>
        <tr>
        	<td style="text-indent:8em"><input type="checkbox" class="nowamagicCheck" id="ID0102" name="Name010201">Ajax文章1</input></td>
        </tr>
        <tr>
        	<td style="text-indent:4em"><input type="checkbox" class="nowamagicCheck" id="ID01" name="Name0103">CSS区</input></td>
        </tr>
        <tr>
        	<td><input id="show" size="100"></input></td>
        </tr>
        <tr>
        	<td>
            <input type="checkbox" id="submitType" onclick="submitTypeName.innerText=(this.checked?'完全':'简单');"><b id="submitTypeName">简单</b>提交类型</input>
            <form onsubmit="return mySubmit(); ">
            <input type="submit"></input>
            </form>
            </td>
        </tr>
    </table>

<script language="javascript">
    var readme =    "<span style='font-size:12px'>";
    readme +=        "Checkbox 联动演示" + "<br>";
    readme +=        "by NowaMagic" + "<br>";
    readme +=        "</span>";
    document.all.readme.innerHTML = readme;
</script>
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们