Posted on 2006-03-08 23:56
大大毛 閱讀(624)
評論(0) 編輯 收藏 所屬分類:
HTML
???這是基于
上一篇
的
實際運用(代碼能夠實現的特點在上一篇已有表述),這里沒有使用多種提交.
源碼:
HTML源碼
<
HTML
>
<
HEAD
>
<
TITLE
>
?Checkbox聯動演示--部門/員工?
</
TITLE
>
<
script?
language
="javascript"
>
//
特定的ID前綴,用于區別頁面其它對象
var
?myID?
=
?
"
ID
"
;
//
特定的Name前綴,用于區別頁面其它對象
var
?myName?
=
?
"
Name
"
;
//
頁面事件過濾
function
?filter()?
{
????
var
?Obj?
=
?window.event.srcElement;
????
//
過濾條件:
????
//
????.是個Checkbox控件
????
//
????.其類名前綴為指定類名
????
if
?(Obj.type?
==
?
"
checkbox
"
?
&&
?(Obj.className?
==
?
"
dept
"
?
||
?Obj.className?
==
?
"
employee
"
))
{
????????down(Obj);
????????up(Obj);
????}
else
{
????}
}
//
向下處理子控件,使之與當前控件同步
//
theObj:當前處理的控件對象
function
?down(theObj)?
{
????
//
得到子控件ID:
????
//
????.ID前綴?+?當前控件有效ID(記錄在Name屬性中)
????
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
;
????}
}
//
向上
//
theObj:當前處理的控件對象
function
?up(theObj)?
{
????
var
?bortherObj;
????
var
?parentObj;
????
var
?parentObjName;
????
var
?flag?
=
?
0
;
????
if
((theObj?
!=
?
null
)?
&&
?(theObj.value?
!=
?
""
))?
{
????????
//
得到父控件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:起始處的對象
//
????.result:提交值串
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
>