zoukankan      html  css  js  c++  java
  • 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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    ul { list-style:none; }
    </style>
    <script type="text/javascript">
    window.onload = function() {
        var obj = document.getElementById('demo').getElementsByTagName('input');
        for (var i = 0; i < obj.length; i ++) {
            obj[i].onclick = function() {
                //查找并选择/取消选择所有子项
                var childrenObj = this.parentNode.getElementsByTagName('ul');
                if (childrenObj.length > 0) {
                    for (var j = 0; j < childrenObj.length; j ++) {
                        var o = childrenObj[j].getElementsByTagName('input');
                        for (var k = 0; k < o.length; k ++) o[k].checked = this.checked;
                    }
                }
                 
                //递归方法检查并设置父选项选择状态
                checkParent(this);
            }
        }
    }
     
    function checkParent(obj) {
        var parentObj = obj.parentNode.parentNode;
        if (parentObj.id != 'demo') {
          parentObj = parentObj.parentNode;
          var FLAG = true; //标志位,true表示父级选项的所有子选项都是选中的,初始值为true,假设全部为选中
          var o = parentObj.getElementsByTagName('input');
          for (var i = 1; i < o.length; i ++) {
              if (!o[i].checked) {
                  FLAG = false;
                  break;
              }
          }
          if (FLAG) o[0].checked = true;
          else o[0].checked = false;
          if (parentObj.parentNode.parentNode.id != 'demo') checkParent(o[0]);
        }
    }
    </script>
    </head>
     
    <body>
    <form id="weaver" name="frmmain" method="post">
        <ul id="demo">
            <li><input type="checkbox" />系统使用
                <ul>
                    <li><input type="checkbox" />系统使用规范</li>
                    <li><input type="checkbox" />系统功能介绍
                        <ul>
                            <li><input type="checkbox" />三级选项1
                                <ul>
                                    <li><input type="checkbox" />四级选项1</li>
                                </ul>
                            </li>
                            <li><input type="checkbox" />三级选项2</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><input type="checkbox" />会议资料
                <ul>
                    <li><input type="checkbox" />会议资料</li>
                </ul>
            </li>
        </ul>
    </form>
    </body>
    </html>
  • 相关阅读:
    hdu 4651 Partition (利用五边形定理求解切割数)
    单点登录SSO的实现原理
    高速排序算法
    2014 百度之星第三题
    TR069协议向导——一个帮助你了解TR069协议的简明教程(一)
    教你用笔记本破解无线路由器password
    人脸识别算法初次了解
    JSP验证码
    GROUP BY,WHERE,HAVING之间的差别和使用方法
    typedef函数指针使用方法
  • 原文地址:https://www.cnblogs.com/visi_zhangyang/p/3519366.html
Copyright © 2011-2022 走看看