|
Posted on 2006-03-08 23:33 大大毛 阅读(1357) 评论(1) 编辑 收藏 所属分类: HTML
从运行效果中可以看到几个特点: 1.普通的联动; 2.半选状态; 整个结构呈树型,下层节点的变动会反映为上层树节点的选取状态,提供半选状态是为了能够更加形象的表示, 我非常不满意普通的联动只有"选取/不选"两种,而我在此提供"部分选取"的状态显示; 3.简化/完全提交的功能 例如: 提供一个表单用于显示公司各个部门的员工,而让你来选取合适的员工; 非常多的情况下,操作者可能选取了一整个部门,而提交如果按员工来提交的话(完全提交),则提交的数据量会很大, 而用这里的简化提交就不同了,提交上去的会是一个部门ID以及零散员工ID,在处理时根据ID特征的不同来处理,应该能很大提升处理效率 源码:
 HTML源码
<HTML>
<HEAD>
<TITLE> Checkbox联动演示 </TITLE>
 <script language="javascript">
//特定的Checkbox类名前缀
var myClassName = "ddmChk";
//特定的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>
</HEAD>

<BODY>
<table width="100%" cellspacing="0" cellpadding="0">
<tr height="60pt">
<td><pre id="readme">说明</pre></td>
</tr>
<tr height="60pt">
<td><pre>
演示Checkbox联动

Checkbox.class:用于事件过滤
Checkbox.id: 用于表示层次关系,子对象的ID = 父对象的标识
Checkbox.name: 用于保存对象的标识
</pre></td>
</tr>
<tr>
<td><input type="checkbox" class="ddmChkRoot" id="ID" name="Name01">01</input></td>
</tr>
<tr><td>
<input type="checkbox" class="ddmChk" id="ID01" name="Name0101">0101</input></td>
</tr>
<tr><td>
<input type="checkbox" class="ddmChk" id="ID0101" name="Name010101">010101</input></td>
</tr>
<tr><td>
<input type="checkbox" class="ddmChk" id="ID0101" name="Name010102">010102</input></td>
</tr>
<tr><td>
<input type="checkbox" class="ddmChk" id="ID010102" name="Name01010201">01010201</input></td>
</tr>
<tr><td>
<input type="checkbox" class="ddmChk" id="ID01" name="Name0102">0102</input></td>
</tr>
<tr><td>
<input type="checkbox" class="ddmChk" id="ID0102" name="Name010201">010201</input></td>
</tr>
<tr><td>
<input type="checkbox" class="ddmChk" id="ID01" name="Name0103">0103</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>
</BODY>
 <script language="javascript">
var readme = "<font size=2>";
readme += "<font size=6>Checkbox联动演示</font>" + "<br>";
readme += "作者:大大毛" + "<br>";
readme += "修改日期:2006/01/19" + "<br>";
readme += "</font>";
document.all.readme.innerHTML = readme;
</script>
</HTML>
评论
# re: Checkbox联动演示 回复 更多评论
2011-06-30 23:14 by
dcdc
|