집 > 기사 > 웹 프론트엔드 > 트리 메뉴 Checkbox_javascript 스킬 전체 선택에 대해

트리 메뉴 Checkbox_javascript 스킬 전체 선택에 대해

WBOY원래의: 2016-05-16 19:02:52936검색

<title>체크박스</title> 
<meta name="generator" content="editplus"> 
<meta name="author" content="www.cndou.com.cn"> 
<style type="text/css"> 
본문{글꼴 크기:12px;} 
.panel {BORDER-RIGHT: #d4d0c8 3px double; OVERFLOW-Y: 스크롤; 패딩-왼쪽: 5px; 테두리 상단: #d4d0c8 2px 능선; 테두리 왼쪽: #808080 2px 능선; 테두리-하단: #d4d0c8 3px double; 높이: 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"><label for="chkClass_33">├휴대폰</label></span>
<span id="36" class="child" pid="9"><input id="chkClass_34" type="checkbox" name="chkClass"><label for="chkClass_34">├디지털 카메라</label></span>
<span id="37" class="child" pid="9"><input id="chkClass_35" type="checkbox" name="chkClass"><label for="chkClass_35">├워크맨, 헤드폰 스테레오</label></span>
<span id="38" class="child" pid="9"><input id="chkClass_36" type="checkbox" name="chkClass"><label for="chkClass_36">├컴퓨터 액세서리</label></span>
<span id="39" class="child" pid="9"><input id="chkClass_37" type="checkbox" name="chkClass"><label for="chkClass_37">├노트북 데스크탑</label></span>
<span id="40" class="child" pid="9"><input id="chkClass_38" type="checkbox" name="chkClass"><label for="chkClass_38">├컴퓨터 수리</label></span>
<span id="41" class="child" pid="9"><input id="chkClass_39" type="checkbox" name="chkClass"><label for="chkClass_39">├기타 전자관련</label></span></span>

[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]

성명：

이전 기사：JS array_javascript 기술의 확장된 예제 코드다음 기사：JS array_javascript 기술의 확장된 예제 코드

트리 메뉴 Checkbox_javascript 스킬 전체 선택에 대해

관련 기사