欧美激情亚洲综合一区,国产经典三级在线,操操操综合网

Checkbox聯動,一個部門員工的簡單例子

Posted on 2006-03-08 23:56 大大毛閱讀(628) 評論(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新聞 Chat2DB C++博客博問管理
相關文章: 表格排序,實現固定行以及文件/數值排序 Checkbox聯動,一個部門員工的簡單例子 Checkbox聯動演示

大大毛的筆記
DDM's Note

大大毛的筆記

DDM's Note

哪怕沒有辦法一定有說法,
就算沒有鴿子一定有烏鴉,
固執無罪夢想有價,
讓他們驚訝.

Checkbox聯動,一個部門員工的簡單例子

日歷

公告

隨筆分類(4)

文章分類(59)

積分與排名

最新評論

i am ddm

大大毛 的筆記 DDM's Note

大大毛 的筆記

DDM's Note

哪怕沒有辦法一定有說法, 就算沒有鴿子一定有烏鴉, 固執無罪 夢想有價, 讓他們驚訝.

Checkbox聯動,一個部門員工的簡單例子

日歷

公告

隨筆分類(4)

文章分類(59)

積分與排名

最新評論

i am ddm

大大毛的筆記
DDM's Note

大大毛的筆記

哪怕沒有辦法一定有說法,
就算沒有鴿子一定有烏鴉,
固執無罪夢想有價,
讓他們驚訝.