欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！

您现在的位置是：首页 > web前端

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

程序员文章站 2024-01-18 22:18:46

...

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<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>
<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需刷新才能执行]

相关标签： js 树形菜单 Checkbox 全选

上一篇： Oracle性能优化之库缓存与Pin

下一篇：【Thrift】Thrift框架和使用教程-- C/S框架使用教程

推荐阅读