jQuery实现复选框树

当前位置:

jQuery实现复选框树

作者:邓华锋于2011-3-23发布在 分类:javascript / 阅读48435 次 / 共有2条评论  

练练jquery,用jquery实现复选框树,点击某个复选框,其子节点也会被选中,其前面的父节点不选中效果,可以无限制的添加子节点,当然这种动态添加子节点效果没去实现,只是弄了个静态的树,如果不想实现让其前面的父节点不选中状态效果,把checkParentObj(this);注释了就行了。
 以下是代码:




html代码:树的结构


 <input name="1" id="" class="" type="checkbox" value="x1公司" />
  <span>其他</span>
  <ul>
   <li>
    <input name="1" id="" class="" type="checkbox" value="宝宝" />
    <span>宝宝</span>
    <ul>
     <li>
      <input name="1" id="" class="" type="checkbox" value="宝宝1" />
      <span>宝宝1</span>
     </li>
     <li>
      <input name="1" id="" class="" type="checkbox" value="宝宝2" />
      <span>宝宝2</span>
     </li>
    </ul>
   </li>
   <li>
    <input name="1" id="" class="" type="checkbox" value="龙腾" />
    <span>龙腾</span>
   </li>
  <ul>

从上面可以看出规律,每增加一个节点 是以


 <ul>
      <li>
       <input name="1" id="" class="" type="checkbox" value="宝宝1" />
       <span>宝宝1</span>
      </li>
     </ul>
 形式来增加的,增加同级节点是以


 

 <li>
      <input name="1" id="" class="" type="checkbox" value="宝宝2" />
      <span>宝宝2</span>
     </li>


 $(obj).next();//假如说obj对象是x1公司这个复选框,.next()后表示它下一个同级元素,这里是<span>
 $(obj).next().next();//则表示<span>的下一个同级元素是 <ul>,这时取到了ul
 $(obj).next().next().children();//取到了<ul>下的<li>
 $(obj).next().next().children().children('input:checkbox');//取到了li下的复选框,即取到了子节点复选框集合
$(obj);//表示当前复选框对象
$(obj).parent();//取到了li对象
$(obj).parent().parent();//取到了ul对象
$(obj).parent().parent().parent();//取到了li对象
$(obj).parent().parent().parent().children('input:checkbox');//取到了当前复选框对象的父节点复选框对象集合

假设obj对象是“宝宝1”复选框,这段


 $(obj).parent().parent().parent().children('input:checkbox');
 代码,就获取了“x1公司”父节点复选框


js代码注释:


 /**
 * 让其子节点复选框保持与其选择状态一致
 * @author 邓华锋
 * @date 2011年3月23日
 * 
 * @param obj
 */
function checkNextObj(obj) {
	var chs = $(obj).next().next().children().children('input:checkbox');
	// 如果子节点复选框对象集合不为空
	if (chs != null) {
		$(chs).attr('checked', obj.checked);// 此时让得到li下的复选框(即子节点复选框)选择状态跟当前复选框选择状态保持一致
		var len = chs.length;// 获得子节点复选框集合的个数
		// 遍历此集合
		for (var i = 0; i < len; i++) {
			checkNextObj(chs[i]);// 再调用此方法,把子节点复选框对象传入,实现递归检测并让子节点复选框选择状态与父节点选择状态保持一致。
		}
	}
}

/**
 * 让其父节点复选框的选择状态为不选中
 * @author 邓华锋
 * @date 2011年3月23日 
 * 
 * @param obj
 */
function checkParentObj(obj) {
	if(!obj.checked){//必须是未选中状态
		var chs = $(obj).parent().parent().parent().children('input:checkbox');
		if (chs[0]) {// 如果父节点复选框对象
			var parentCheckbox = chs[0];
			if (parentCheckbox != obj) {
				parentCheckbox.checked = false;// 让父节点复选框选择状态为不选中
				checkParentObj(parentCheckbox);// 再调用此方法,把父节点复选框对象传入,实现递归检测并让父节点复选框的选择状态更改为不选中
			}
		}
	}
	
}

/**
 * 让其父节点复选框的选择状态为选中
 * @author 邓华锋
 * @date 2011年3月23日 
 * 
 * @param obj
 */
function checkParentCheck(obj) {
	if (obj.checked) {//必须是选中状态
		var parent = $(obj).parent().parent();
		var chs = $(parent).children().children('input:checkbox');//获得与当前复选框同级别的复选框
		if (chs != null) {
			var len = chs.length;
			var isNoChecked = false;
			//遍历检测同级别的复选框是否全都选中
			for (var i = 0; i < len; i++) {
				if (!chs[i].checked) {//如果存在没有选中的,直接跳出循环
					isNoChecked = true;//标识存在未选中的复选框
					break;
				}
			}
			//如果同级别的复选框都选中了,则
			if (!isNoChecked) {
				var parent = $(parent).parent().children('input:checkbox');
				if (parent[0]) {
					parent[0].checked = true;//让其父节点的复选框选中
					checkParentCheck(parent[0]);//递归继续检测
				}
			}
		}
	}
}

$(function() {
	// 给此页面所有复选框添加click事件
	$('input:checkbox').click(function() {
		checkNextObj(this);
		checkParentObj(this);
		checkParentCheck(this);
	});
}); 


本文只是简单的实现了复选框树,在上网搜索的过程中,无意间发现了一个很强大的JQuery Tree插件,复选框树,它也实现了,功能很强大,此插件开源免费,看下面介绍:

zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件

  • 兼容 IE、FireFox、Chrome 等浏览器
  • 在一个页面内可同时生成多个 Tree 实例
  • 支持 JSON 数据
  • 支持一次性静态生成 和 Ajax 异步加载 两种方式
  • 支持多种事件响应及反馈
  • 支持 Tree 的节点移动、编辑、删除
  • 支持任意更换皮肤 / 个性化图标(依靠css)
  • 支持极其灵活的 checkbox 或 radio 选择功能
  • 简单的参数配置实现 灵活多变的功能

    点击查看原图

    

    复选框树:http://www.ztree.me/v3/demo.php#_201

    在线操作演示:http://www.treejs.cn/v3/demo.php#_101
    快速下载地址:https://git.oschina.net/zTree/zTree_v3/repository/archive?ref=master

 

  • 标签: jQuery 复选框 tree
  • 该日志于 2011-3-23 22:55 由 邓华锋 发表在 邓华锋 上,你除了可以发表评论外,还可以转载"jQuery实现复选框树"日志到你的网站或博客,但是请保留源地址及作者信息,谢谢!!
  • 版权所有:《邓华锋》 => 《jQuery实现复选框树
    本文地址:http://dhf.me/post-106.html
    除非注明,文章均为 《邓华锋》 原创,欢迎转载!转载请注明本文地址,谢谢。

评论:

  1. bg8tdd于2017-05-24 12:25说: 回复

    干货,收藏了
    function checkNextObj(obj) 中 $(chs).attr('checked',obj.checked); 的attr 改 prop吧