帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» jQuery树形结构
jQuery树形结构
浏览:864次
-
评论:0次
-
发布时间:2017-03-19
Html
Css
Js
父节点1
子节点1
子节点2
子节点3
父节点2
子节点1
子节点2
子节点3
父节点3
子节点1
子节点2
子节点3
.div_inline { display:inline; } /* 设置子节点属性 */ .tree_node_child { margin-left:50px; }
// 页面加载完成后调用 $(function(){ // 为所有的父节点添加点击事件 $(".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"); } }); // 为所有的子节点添加点击事件 $(".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"); } } }); // 为所有的切换按钮添加点击事件 $(".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("+"); } }); });
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>jQuery树形结构-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:jquery树形结构,节点选择
自动播放整屏代码
JS如何判断一个对象是不是Array数组
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
864
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值