Checkbox联动,一个部门员工的简单例子

Posted on 2006-03-08 23:56 大大毛阅读(614) 评论(0) 编辑收藏所属分类: HTML

<HTML>
<HEAD>
<TITLE> Checkbox联动演示--部门/员工 </TITLE>
<script language="javascript">
var myID = "ID";
var myName = "Name";
function filter() {
	var Obj = window.event.srcElement;
	if (Obj.type == "checkbox" && (Obj.className == "dept" || Obj.className == "employee")){
		down(Obj);
		up(Obj);
	}else{
	}
}
function down(theObj) {
	var subObjects;
	var subObjectID;
	if(theObj != null) {
		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++) {
					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.value != "")) {
		parentObjName = myName + theObj.id.substring(myID.length);
		parentObj = document.all(parentObjName);
		if(parentObj != null) {
			bortherObj = document.all(theObj.id);
			if(bortherObj.length) {
				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) {
					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;
	}
}
function getChkValue(theObj,result) {
	var ID = "";
	var subObjects;
	var subObjectID;
	if(theObj != null) {
		if(theObj.indeterminate) {
		}else{
			if(theObj.className == "employee") {
				result += (theObj.checked?("," + theObj.name.substring(myName.length)):"");
			}
		}
		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],result);
				}
			}else{
				if(subObjects.className == "employee") {
					result += (subObjects.checked?("," + subObjects.name.substring(myName.length)):"");
				}
			}
		}
	}else{
		return result;
	}
	return result;
}
function mySubmit() {
	var result = "";
	result = getChkValue(document.all("Named01"),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.class:用于事件过滤,存在有多个class
	Checkbox.id:   用于表示层次关系,子对象的ID = 父对象的标识
	Checkbox.name: 用于保存对象的标识(唯一标识)
			</pre></td>
		</tr>
		<tr>
			<td><input type="checkbox" class="dept" id="ID" name="Named01">部门d01</input></td>
		</tr>
		<tr><td>  
			<input type="checkbox" class="dept" id="IDd01" name="Named02">部门d02</input></td>
		</tr>
		<tr><td>    
			<input type="checkbox" class="employee" id="IDd02" name="Namee01">员工e01</input></td>
		</tr>
		<tr><td>    
			<input type="checkbox" class="dept" id="IDd02" name="Named05">部门d05</input></td>
		</tr>
		<tr><td>      
			<input type="checkbox" class="employee" id="IDd05" name="Namee02">员工e02</input></td>
		</tr>
		<tr><td>  
			<input type="checkbox" class="dept" id="IDd01" name="Named03">部门d03</input></td>
		</tr>
		<tr><td>    
			<input type="checkbox" class="employee" id="IDd03" name="Namee03">员工e03</input></td>
		</tr>
		<tr><td>  
			<input type="checkbox" class="dept" id="IDd01" name="Named04">部门d04</input></td>
		</tr>
		<tr><td>
			<input id="show" size="100"></input></td>
		</tr>
		<tr><td>
			<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/20" + "<br>";
	readme +=		"</font>";
	document.all.readme.innerHTML = readme;
</script>
</HTML>

这是基于上一篇的实际运用(代码能够实现的特点在上一篇已有表述),这里没有使用多种提交.

源码:

HTML源码

新用户注册刷新评论列表


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻知识库 C++博客博问管理
相关文章: 表格排序,实现固定行以及文件/数值排序 Checkbox联动,一个部门员工的简单例子 Checkbox联动演示

大大毛的笔记
DDM's Note

大大毛的笔记

DDM's Note

哪怕没有办法一定有说法,
就算没有鸽子一定有乌鸦,
固执无罪梦想有价,
让他们惊讶.