关于树形菜单 Checkbox的全选

更新时间：2008年07月09日 23:02:06 作者：

js树形菜单全选

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <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> </head> <body> <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>      </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

javascript简单实现图片预加载
本文是给大家分享一段简单的实现图片预加载技术的javascript代码，超级精简，却很实用，这里推荐给大家
2014-12-12
Angular 服务器端渲染缓存功能问题
这篇文章主要介绍了Angular服务器端渲染缓存功能问题，内存缓存可用于应用程序本身的渲染页面和API请求。两种使用场合都通过开发包@ngx-ssr或cache提供
2022-06-06
Javascript实现苹果悬浮虚拟按钮
本文给大家分享的是使用javascript实现仿制苹果的悬浮虚拟按钮的代码，非常的简单，给大家一个思路，大家可以根据自己的情况自由扩展。
2016-04-04
一文详解uniapp中如何使用easycom自定义组件
easycom是uniapp的一种组件自动引入的规则,使用这种规则可以使满足规则的组件无需注册直接使用,下面这篇文章主要给大家介绍了关于uniapp中如何使用easycom自定义组件的相关资料,需要的朋友可以参考下
2023-05-05
js判断数据类型如判断是否为数组是否为字符串等等
js判断数据类型如判断是否为数组类型、判断是否为字符串类型、判断是否为数值类型等等，本文有几个不错的示例，大家可以学习下
2014-01-01
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
这篇文章主要介绍了jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法,结合实例形式分析了jQuery结合bootstrap插件实现的鼠标响应式提示框相关操作技巧,需要的朋友可以参考下
2020-04-04
JavaScript中获取随机数的几种方法小结
本文总结了JavaScript中获取随机数的几种方法,包括Math.random()、生成指定范围的随机数和从数组中随机选择一个元素,具有一定的参考价值,感兴趣的可以了解一下
2025-02-02
echarts自定义legend样式的详细图文教程
在默认的饼状图里面,图例legend颜色是黑色的,有时候根据ui需要,根据不同的背景色,下面这篇文章主要给大家介绍了关于echarts自定义legend样式的相关资料,需要的朋友可以参考下
2022-10-10
JavaScript获取DOM元素的多种方法
DOM是 HTML 和 XML 文档的编程接口,表现为网页结构的树状对象,每个对象对应页面的一部分,如 HTML 元素,获取 DOM 元素是交互式网页开发的核心,用于修改内容、样式或行为,本文给大家介绍了JavaScript获取DOM元素的多种方法,需要的朋友可以参考下
2025-03-03
前端实现Excel文件导出功能的完整代码解析(vue实现excel文件导出)
在Vue中实现导出Excel文件有多种方式,可以通过前端实现,也可以通过前后端配合实现,下面这篇文章主要给大家介绍了关于前端实现Excel文件导出功能(vue实现excel文件导出)的相关资料,需要的朋友可以参考下
2024-05-05

关于树形菜单 Checkbox的全选

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具