1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. ul { list-style:none; }
  8. </style>
  9. <script type="text/javascript">
  10. window.onload = function() {
  11.     var obj = document.getElementById('demo').getElementsByTagName('input');
  12.     for (var i = 0; i < obj.length; i ++) {
  13.         obj[i].onclick = function() {
  14.             //查找并选择/取消选择所有子项
  15.             var childrenObj = this.parentNode.getElementsByTagName('ul');
  16.             if (childrenObj.length > 0) {
  17.                 for (var j = 0; j < childrenObj.length; j ++) {
  18.                     var o = childrenObj[j].getElementsByTagName('input');
  19.                     for (var k = 0; k < o.length; k ++) o[k].checked = this.checked;
  20.                 }
  21.             }
  22.  
  23.             //递归方法检查并设置父选项选择状态
  24.             checkParent(this);
  25.         }
  26.     }
  27. }
  28.  
  29. function checkParent(obj) {
  30.     var parentObj = obj.parentNode.parentNode;
  31.     if (parentObj.id != 'demo') {
  32.       parentObj = parentObj.parentNode;
  33.       var FLAG = true; //标志位，true表示父级选项的所有子选项都是选中的，初始值为true，假设全部为选中
  34.       var o = parentObj.getElementsByTagName('input');
  35.       for (var i = 1; i < o.length; i ++) {
  36.           if (!o[i].checked) {
  37.               FLAG = false;
  38.               break;
  39.           }
  40.       }
  41.       if (FLAG) o[0].checked = true;
  42.       else o[0].checked = false;
  43.       if (parentObj.parentNode.parentNode.id != 'demo') checkParent(o[0]);
  44.     }
  45. }
  46. </script>
  47. </head>
  48.  
  49. <body>
  50. <form id="weaver" name="frmmain" method="post">
  51.     <ul id="demo">
  52.         <li><input type="checkbox" />系统使用
  53.             <ul>
  54.                 <li><input type="checkbox" />系统使用规范</li>
  55.                 <li><input type="checkbox" />系统功能介绍
  56.                     <ul>
  57.                         <li><input type="checkbox" />三级选项1
  58.                             <ul>
  59.                                 <li><input type="checkbox" />四级选项1</li>
  60.                             </ul>
  61.                         </li>
  62.                         <li><input type="checkbox" />三级选项2</li>
  63.                     </ul>
  64.                 </li>
  65.             </ul>
  66.         </li>
  67.         <li><input type="checkbox" />会议资料
  68.             <ul>
  69.                 <li><input type="checkbox" />会议资料</li>
  70.             </ul>
  71.         </li>
  72.     </ul>
  73. </form>
  74. </body>
  75. </html>

JS四级复选框选中层次关系的更多相关文章

  1. js input复选框选中父级同时子级也选中

    js实现复选框选中父级元素子级元素也选中,没有子级元素选中父级也不选中的效果 HTML <tr> <td> <label> <input name=" ...

  2. springMvc接收ajax数组参数，以及jquery复选框选中、反选、全选、全不选

    一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...

  3. 【JS新手教程】LODOP打印复选框选中的任务或页数

    之前的博文:[JS新手教程]LODOP打印复选框选中的内容关于任务:Lodop打印语句最基本结构介绍(什么是一个任务)关于本文用到的JS的eval方法:JS-JAVASCRIPT的eval()方法该文 ...

  4. JS复选框选中

    Web前端之复选框选中属性   熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好了.博主之前用户不少方法,经常 ...

  5. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. js实现复选框的全选、全不选和反选

    js实现复选框的全选.全不选和反选 主要是用遍历的方法查找元素,然后通过改变checked的属性来选择,为true则是选中状态,为false则是未选状态 实现代码 <!DOCTYPE html& ...

  7. bootstrap table 复选框选中后，翻页不影响已选中的复选框

    使用的 jquery版本为 2.1.1 在项目中发现bootstrap table的复选框选中后,翻页操作会导致上一页选中的丢失,api中的 bootstrapTable('getSelections ...

  8. js操作复选框 复选框

    //复选框点击事件 function checkAll(){ let tp=$("#tp").val(); let all=$("input[name='id']&quo ...

  9. js操作复选框

    js操作复选框 JavaScript 代码: //复选框全选 $(function () { $("#select_all").click(function () { $(&quo ...

随机推荐

  1. Forms and Reports Developer 10g Certified on Windows 10 for EBS 12.x

    Forms Developer 10g and Reports Developer 10g are now certified on Windows 10 desktops for E-Busines ...

  2. C#-foreach与yield

    (转自:http://www.jb51.net/article/34627.htm) 1. foreach语句 C#编译器会把foreach语句转换为IEnumerable接口的方法和属性. fore ...

  3. OC-文件操作

    一.归档NSKeyedArchiver========================== 1.第一种方式:存储一种数据.===================== //归档 //第一种写法 //对象 ...

  4. ubuntu1604-server上安装virtualbox+phpvirtualbox

    1.需要安装phpvirtualbox版本与virtualbox的版本一致,比如phpvirtual5.0.x,需要对应virtualbox 5.0.x 2.需要安装的软件有apache2.php.l ...

  5. iOS当前屏幕截屏

    需求描述: 有两个ViewController 我们记做 A.B ,其中B controller只是显示下半部分: 如下图效果: 实现这种的方案很多,可以用添加View方法,  也可以用UIWindo ...

  6. mysql5.6.11安装

    下面详细介绍5.6版本MySQL的下载.安装及配置过程. 图1.1 MySQL5.6 目前针对不同用户,MySQL提供了2个不同的版本: Ø         MySQL Community Serve ...

  7. Java开发前期准备工作

    配置Java开发环境变量 在"系统变量"中设置3项属性,JAVA_HOME, PATH, CLASSPATH. 变量设置参数如下: 变量名:JAVA_HOME 变量值:C:\Pro ...

  8. idea操作

    archetypeCatalog  internal 1字体: 2编码 http://blog.csdn.net/frankcheng5143/article/details/50779149 3部署 ...

  9. jQuery ajax submit form 被拦截问题的解决

    一般情况下用js或jquery的submit方法提交form表单是不会被浏览器拦截的,但是发现异步的情况下用js提交form表单就会被浏览器拦截,这样就对功能的实现带来了很多的麻烦.网上看了好多都是同 ...

  10. laravel 中config的使用

    在laravel的config中添加配置文件(比如:alipay.php)文件内容为return数组的形式 在方法中使用config()函数获取数据 $config = config('alipay. ...