关于树形菜单 Checkbox的全选_javascript技巧

<title>Checkbox</title> <meta name="generator" content="editplus"> <meta name="author" content="www.cndou.com.cn"> <style type="text/css"> body{font-size:12px;} .panel {BORDER-RIGHT: #d4d0c8 3px double; OVERFLOW-Y: scroll; PADDING-LEFT: 5px; BORDER-TOP: #d4d0c8 2px ridge; BORDER-LEFT: #808080 2px ridge; BORDER-BOTTOM: #d4d0c8 3px double; HEIGHT: 250px} .parent {PADDING-LEFT: 15px} .child {PADDING-LEFT: 30px} </style> <script type="text/javascript"> // CheckBoxList 选框 function chkbox(obj) { var chk = obj.all.tags("input"); var count = chk.length; if (event.srcElement.tagName == "INPUT") { with (event.srcElement) { // 全选 if (parentElement.pid == "-1") { for (var i=0; i<count; i++) { chk[i].checked = checked; } } // 父类 if (parentElement.pid == "0") { chk[0].checked = checked; for (var i=0; i<count; i++) { if (chk[i].parentElement.pid == parentElement.id) chk[i].checked = checked if (!chk[i].checked) chk[0].checked = false; } } // 子类 if (parentElement.pid > "0") { chk[0].checked = checked; var parentObj; // 父类对象 for (var i=0; i<count; i++) { if (chk[i].parentElement.id == parentElement.pid) // 选中父类 { parentObj = chk[i]; // 将父类对象赋于一个变量 chk[i].checked = checked; } if (chk[i].parentElement.pid == parentElement.pid) // 如果子类中有一项没有选中，将父类的选中取消 { if (!chk[i].checked) parentObj.checked = false; } if (!chk[i].checked) chk[0].checked = false; } } // if end } // with end } // if end } </script> <span>请选择要重新发布的商品类别</span> <span style="WIDTH: 200px; DISPLAY: inline-block" id="chkClass" oncontextmenu="return false;" onselectstart="return false" class="panel" onclick="chkbox(this);"> <span id="-1" pid="-1"><input id="chkClass_0" type="checkbox" name="chkClass$0"><label for="chkClass_0">全选</label></span> <span id="1" class="parent" pid="0"><input id="chkClass_1" type="checkbox" name="chkClass$1"><label for="chkClass_1">房屋信息</label></span> <span id="10" class="child" pid="1"><input id="chkClass_2" type="checkbox" name="chkClass$2"><label for="chkClass_2">├整套出租</label></span> <span id="11" class="child" pid="1"><input id="chkClass_3" type="checkbox" name="chkClass$3"><label for="chkClass_3">├单间出租</label></span> <span id="12" class="child" pid="1"><input id="chkClass_4" type="checkbox" name="chkClass$4"><label for="chkClass_4">├短期出租</label></span> <span id="13" class="child" pid="1"><input id="chkClass_5" type="checkbox" name="chkClass$5"><label for="chkClass_5">├求租房屋</label></span> <span id="14" class="child" pid="1"><input id="chkClass_6" type="checkbox" name="chkClass$6"><label for="chkClass_6">├房屋出售</label></span> <span id="2" class="parent" pid="0"><input id="chkClass_7" type="checkbox" name="chkClass$7"><label for="chkClass_7">教育培训</label></span> <span id="15" class="child" pid="2"><input id="chkClass_8" type="checkbox" name="chkClass$8"><label for="chkClass_8">├语言课程</label></span> <span id="16" class="child" pid="2"><input id="chkClass_9" type="checkbox" name="chkClass$9"><label for="chkClass_9">├商业课程</label></span> <span id="17" class="child" pid="2"><input id="chkClass_10" type="checkbox" name="chkClass$10"><label for="chkClass_10">├证书培训</label></span> <span id="18" class="child" pid="2"><input id="chkClass_11" type="checkbox" name="chkClass$11"><label for="chkClass_11">├家教辅导</label></span> <span id="19" class="child" pid="2"><input id="chkClass_12" type="checkbox" name="chkClass$12"><label for="chkClass_12">├教育中介</label></span> <span id="20" class="child" pid="2"><input id="chkClass_13" type="checkbox" name="chkClass$13"><label for="chkClass_13">├其它教育相关</label></span> <span id="3" class="parent" pid="0"><input id="chkClass_14" type="checkbox" name="chkClass$14"><label for="chkClass_14">招聘求职</label></span> <span id="21" class="child" pid="3"><input id="chkClass_15" type="checkbox" name="chkClass$15"><label for="chkClass_15">├招聘信息</label></span> <span id="22" class="child" pid="3"><input id="chkClass_16" type="checkbox" name="chkClass$16"><label for="chkClass_16">├求职信息</label></span> <span id="6" class="parent" pid="0"><input id="chkClass_17" type="checkbox" name="chkClass$17"><label for="chkClass_17">居家用品</label></span> <span id="23" class="child" pid="6"><input id="chkClass_18" type="checkbox" name="chkClass$18"><label for="chkClass_18">├家用电器</label></span> <span id="24" class="child" pid="6"><input id="chkClass_19" type="checkbox" name="chkClass$19"><label for="chkClass_19">├家具</label></span> <span id="25" class="child" pid="6"><input id="chkClass_20" type="checkbox" name="chkClass$20"><label for="chkClass_20">├厨具</label></span> <span id="26" class="child" pid="6"><input id="chkClass_21" type="checkbox" name="chkClass$21"><label for="chkClass_21">├床上用品</label></span> <span id="27" class="child" pid="6"><input id="chkClass_22" type="checkbox" name="chkClass$22"><label for="chkClass_22">├其它居家相关</label></span> <span id="7" class="parent" pid="0"><input id="chkClass_23" type="checkbox" name="chkClass$23"><label for="chkClass_23">美食餐馆</label></span> <span id="28" class="child" pid="7"><input id="chkClass_24" type="checkbox" name="chkClass$24"><label for="chkClass_24">├餐馆</label></span> <span id="29" class="child" pid="7"><input id="chkClass_25" type="checkbox" name="chkClass$25"><label for="chkClass_25">├外卖服务</label></span> <span id="8" class="parent" pid="0"><input id="chkClass_26" type="checkbox" name="chkClass$26"><label for="chkClass_26">服饰美容</label></span> <span id="30" class="child" pid="8"><input id="chkClass_27" type="checkbox" name="chkClass$27"><label for="chkClass_27">├时尚服装</label></span> <span id="31" class="child" pid="8"><input id="chkClass_28" type="checkbox" name="chkClass$28"><label for="chkClass_28">├流行饰品</label></span> <span id="32" class="child" pid="8"><input id="chkClass_29" type="checkbox" name="chkClass$29"><label for="chkClass_29">├包包鞋帽</label></span> <span id="33" class="child" pid="8"><input id="chkClass_30" type="checkbox" name="chkClass$30"><label for="chkClass_30">├美容护肤</label></span> <span id="34" class="child" pid="8"><input id="chkClass_31" type="checkbox" name="chkClass$31"><label for="chkClass_31">├其它服饰美容相关</label></span> <span id="9" class="parent" pid="0"><input id="chkClass_32" type="checkbox" name="chkClass$32"><label for="chkClass_32">电子通讯</label></span> <span id="35" class="child" pid="9"><input id="chkClass_33" type="checkbox" name="chkClass$33"><label for="chkClass_33">├手机</label></span> <span id="36" class="child" pid="9"><input id="chkClass_34" type="checkbox" name="chkClass$34"><label for="chkClass_34">├数码相机</label></span> <span id="37" class="child" pid="9"><input id="chkClass_35" type="checkbox" name="chkClass$35"><label for="chkClass_35">├随身听，耳机音响</label></span> <span id="38" class="child" pid="9"><input id="chkClass_36" type="checkbox" name="chkClass$36"><label for="chkClass_36">├电脑配件</label></span> <span id="39" class="child" pid="9"><input id="chkClass_37" type="checkbox" name="chkClass$37"><label for="chkClass_37">├笔记本台式机</label></span> <span id="40" class="child" pid="9"><input id="chkClass_38" type="checkbox" name="chkClass$38"><label for="chkClass_38">├电脑维修</label></span> <span id="41" class="child" pid="9"><input id="chkClass_39" type="checkbox" name="chkClass$39"><label for="chkClass_39">├其它电子相关</label></span></span>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]