您好,登录后才能下订单哦!
小编给大家分享一下JQuery如何实现简单的复选框树形结构图,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
具体如下:
这是自己写的简单树形结构图,实现的功能有:
1.最左边的按钮实现子目录的隐藏和显示
2.点击父节点的复选框选中后,父节点下的所有的子节点也选中;父节点未选中,则下面的所有的子节点也取消选中(全选和全不选)
3.选中一个子节点时相应的父节点也选中;当所有的子节点都没有选中时,父节点也取消选中
这是实现的最简单的功能。下面来具体的谈谈具体的实现:
1.引入库
所有的这些操作都是通过JQuery来实现的,所以首先要引入JQuery库,可以到官网下载JQuery库,也可以通过CDN的方式来引用,这里我是通过CDN的方式引用的:
<!-- 引入JQuery --> <script src="https://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
2.子目录的隐藏和显示
这里我只是做了一个简单的,可能看起来不是很美观,我的最左边放的是一个button按钮,并且没有经过CSS美化,所以看起来比较丑,不过这都不是重点,重点是我们功能的实现,由于我的代码比较简单并且注释我也写的比较详细了,所以这里我就不做过多的介绍,直接贴代码:
<!-- 切换子目录隐藏或显示的按钮 --> <div class="div_inline"><input type="button" value="-" class="tree_node_toggle_button"></div>
上面是按钮,下面是按钮的点击事件:
// 为所有的切换按钮添加点击事件 $(".tree_node_toggle_button").click(function () { // 获取需要隐藏或显示的节点 var $toggle_node = $(this).parent().next().find(".tree_node_child"); $toggle_node.toggle(); // 切换隐藏或显示 // 切换按钮的显示 if($toggle_node.is(":visible")){ $(this).val("-"); }else{ $(this).val("+"); } });
简单说明一下逻辑就是,点击按钮后,切换子目录的隐藏或显示,然后根据子目录的隐藏或显示状态,来重新设置按钮的显示'+'或者'-'
3.全选/全不选
// 为所有的父节点添加点击事件 $(".tree_node_parent_checkbox").click(function(){ // 获取父节点是否选中 var isChange = $(this).prop("checked"); if(isChange){ // 如果选中,则父节点下的所有的子节点都选中 // 获取当前checkbox节点的兄弟节点下的所有的checkbox子节点选中 $(this).next().find(".tree_node_child_checkbox").prop("checked", true); }else{ // 未选中,取消全选 // 获取当前checkbox节点的兄弟节点下的所有的checkbox子节点选中 $(this).next().find(".tree_node_child_checkbox").removeAttr("checked"); } });
这里特别注意一下,切换checkbox的选中要用prop()方法,不能用attr(),如果用attr()首次是不能出现我们需要的效果的。关于prop和attr的区别可以去官网查看prop介绍JQuery prop 。
4.选中子节点后父节点的相应变化状态
// 为所有的子节点添加点击事件 $(".tree_node_child_checkbox").click(function () { // 获取选中的节点的父节点下的所有子节点选中的数量 var length = $(this).parent().find(".tree_node_child_checkbox:checked").length; // 判断当前结点是否选中 if($(this).prop("checked")){ // 选中 // 如果当前节点选中后,所有的选中节点数量1,选中父节点 if(length == 1){ // 选中父节点 $(this).parent().prev().prop("checked", true); } }else{ // 节点未选中 if(length == 0){ // 取消父节点的选中状态 $(this).parent().prev().removeAttr("checked"); } } });
主要的代码就是这么多,其实也没什么复杂的。
jquery是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件,是继Prototype之后又一个优秀的JavaScript代码库,能够用于简化事件处理、HTML文档遍历、Ajax交互和动画,以便快速开发网站。
以上是“JQuery如何实现简单的复选框树形结构图”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。