js用于树型结构级联选择

2016-02-19 22:17 61 1 收藏

get新技能是需要付出行动的,即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是js用于树型结构级联选择,一起来学习了解下吧!

【 tulaoshi.com - Web开发 】

html

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

head
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
title及联选择-用于权限选择比较合适/title
/head

body
ul id="tree"
    liinput type=checkbox
        ul
            liinput type=checkbox
                ul
                    liinput type=checkbox/li
                    liinput type=checkbox/li
                /ul
            /li
        /ul
    /li
/ul
/body
script language="javascript"

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

var arr = tree.getElementsByTagName('input')
for(var i=0; iarr.length; i++){
    var input = arr[i]
    if(input.type = 'checkbox'){
        input.onclick = ClickInput
    }
}

function ClickInput(){
    var li = this.parentElement;
    var arr = li.getElementsByTagName('input')
    for(var i=0; iarr.length; i++){
        var input = arr[i]
        if(input.type == 'checkbox'){
            input.checked = this.checked
        }
    }
    var li = li.parentElement.parentElement
   
    while(li.tagName.toLowerCase() == 'li'){
        var input = li.childNodes[0]
        if(input.tagName.toLowerCase() == 'input'){
            input.checked = this.checked
        }
        li = li.parentElement.parentElement
    }
}

/script
/html

来源:https://www.tulaoshi.com/n/20160219/1628099.html

延伸阅读
标签: Web开发
入住日期:  离店日期:
标签: Web开发
CSS通过与(X)HTML的文档结构相对应的选择器(selector)来达到控制页面表现的目的,而文档结构不仅仅在CSS的应用上非常重要,对于行为层(例如使用JavaScript控制元素的行为)同样也非常重要。 文档结构(X)HTML文档可以看作一个家族树,这个树有1个祖先根元素,然后各元素依次向下排列,例如有XHTML代码如下,其文档树如图4-1所示...
标签: 生活常识
如何选择住宅的结构类型   选房时,也要选择好结构的类型,住宅的结构类型主要是以其承重结构所用材料来划分的。目前常见的住宅结构有砖混结构和钢筋混凝土结构。 图老师阅读配图 砖混结构的主要承重结构是粘土砖和小部分钢筋混凝土构件,只适用于多层住宅,它的优点是造价低,保温、隔热性能好,便于施工。缺点是房屋开间...
标签: 软件教程
HTML网页制作的朋友不会陌生,在网页制作的是时候我们可能会用到编号。但是编号往往不是一级,那么我们该如何实现级联编号呢?下面小编就为大家分享一下HTML级联编号如何实现 CSS counter-reset 属性 CSS counter-reset 属性用于设置某个选择器出现次数的计数器的值。 我们就可以使用以下有序列表进行测...
Borland公司的MIDAS让我们能用Delphi构建强大的多层分布式数据库系统,MIDAS提供了很多种的客户程序和中间层的连接方式,如:Sockect,DCOM,Corba等等,这么多的方式,在开发多层体系的时候我们应该如何选择呢,下面我就简单的介绍一下这几种连结方式。 Socket: !-- frame contents -- !-- /frame contents -- ...

经验教程

371

收藏

76
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部