|
|
Posted on 2006-03-08 23:33 大大毛 阅读(1353) 评论(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
|