JQuery如何实现简单的复选框树形结构的图 - 行业资讯 - 肥雀云

　　介绍

小编给大家分享一下JQuery如何实现简单的复选框树形结构图,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

具体如下:

这是自己写的简单树形结构图,实现的功能有:

1。最左边的按钮实现子目录的隐藏和显示

2。点击父节点的复选框选中后,父节点下的所有的子节点也选中;父节点未选中,则下面的所有的子节点也取消选中(全选和全不选)

3。选中一个子节点时相应的父节点也选中;当所有的子节点都没有选中时,父节点也取消选中

这是实现的最简单的功能。下面来具体的谈谈具体的实现:

1。引入库

所有的这些操作都是通过JQuery来实现的,所以首先要引入JQuery库,可以到官网下载JQuery库,也可以通过CDN的方式来引用,这里我是通过CDN的方式引用的:

& lt; !——,引入JQuery ——比; 　　https://www.yisu.com/zixun/& lt; script src=" https://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js ">

2。子目录的隐藏和显示

这里我只是做了一个简单的,可能看起来不是很美观,我的最左边放的是一个按钮按钮,并且没有经过CSS美化,所以看起来比较丑,不过这都不是重点,重点是我们功能的实现,由于我的代码比较简单并且注释我也写的比较详细了,所以这里我就不做过多的介绍,直接贴代码:

& lt; !——,切换子目录隐藏或显示的按钮,——比; 　　& lt; div 类=癲iv_inline"祝辞& lt; input 类型=癰utton", value=https://www.yisu.com/zixun/薄癱lass=" tree_node_toggle_button ">

上面是按钮、下面是按钮的点击事件:

//,为所有的切换按钮添加点击事件　　美元(“.tree_node_toggle_button") .click (function (), {//,才能获取需要隐藏或显示的节点　　var 才能;toggle_node 美元;=,(这)美元.parent () . next (); (“.tree_node_child"); 　　美元才能toggle_node.toggle();,//,切换隐藏或显示//,才能切换按钮的显示　　如果才能(toggle_node.is美元(“:visible")) { 　　,,,(这).val美元(“产生绯闻); 　　}{其他才能　　,,,(这).val美元(“+”); 　　,,} 　　});

简单说明一下逻辑就是,点击按钮后,切换子目录的隐藏或显示,然后根据子目录的隐藏或显示状态,来重新设置按钮的显示& # 39;+ & # 39;或者& # 39;& # 39;

3。全?全不选

//,为所有的父节点添加点击事件　　$ (“.tree_node_parent_checkbox") .click(函数(){ 　　,,,//,获取父节点是否选中　　,,,var isChange =,(这).prop美元(“checked"); 　　,,,如果(isChange){//大敌;如果选中,则父节点下的所有的子节点都选中　　,,,,,//,获取当前复选框节点的兄弟节点下的所有的复选框子节点选中　　,,,,,(这). next()美元;(“.tree_node_child_checkbox") .prop (“checked",,真的); 　　还有,,,}{//大敌;未选中,取消全选　　,,,,,//,获取当前复选框节点的兄弟节点下的所有的复选框子节点选中　　,,,,,(这). next()美元;(“.tree_node_child_checkbox") .removeAttr (“checked"); 　　,,,} 　　});

这里特别注意一下,切换复选框的选中要用道具()方法,不能用attr(),如果用attr()首次是不能出现我们需要的效果的。关于道具和attr的区别可以去官网查看道具介绍JQuery道具。

4。选中子节点后父节点的相应变化状态

//,为所有的子节点添加点击事件　　美元(“.tree_node_child_checkbox") .click (function (), { 　　,,,//,获取选中的节点的父节点下的所有子节点选中的数量　　,,,var length =,(这)美元.parent (); (“.tree_node_child_checkbox: checked") . length; 　　,,,//,判断当前结点是否选中　　,,,如果美元(这).prop (“checked")){//大敌;选中　　,,,,,//,如果当前节点选中后,所有的选中节点数量1,选中父节点　　,,,,,如果(==length 1) { 　　,,,,,,,//,选中父节点　　,,,,,,,(这)美元.parent () .prev () .prop (“checked",,真的); 　　,,,,,} 　　还有,,,}{//大敌;节点未选中　　,,,,,如果(==length 0) { 　　,,,,,,,//,取消父节点的选中状态　　,,,,,,,(这)美元.parent () .prev () .removeAttr (“checked"); 　　,,,,,} 　　,,,} 　　});

主要的代码就是这么多,其实也没什么复杂的。