CheckBox级联选择

最近做项目时，需要用到CheckBox的级联选择，于是自己动手写了一个。

 

这个CheckBox的级联选择是用纯JavaScript编写的，没有借助其他的JS框架。

 

希望能够对大家有用，同时希望大家多多指出代码中的不足！

 

（注：新上传了跨浏览器的版本。特别感谢“02221021”兄的帮助！）

 

以下是JS代码（附件中可以看效果）：

	//判断所有的checkbox的选中状态
	//@id : checkbox的id
	function checkedStatus(id){

		//获取checkbox
		var temp = document.getElementById(id);
		
		//设置checkbox的下级checkbox的状态
		setChildCheckBox(temp);

		//设置checkbox的上级checkbox的状态
		setParentCheckBox(temp);
	}

	//获取checkbox的下级checkbox信息
	//@entity : checkbox的DOM对象
	function findChildCheckBox(entity){

		//存放下级checkbox的数组
		var chkArray = new Array();

		//判断是否有input标签
		if(document.getElementsByTagName("input")){

			//获取所有的input标签
			var inputs = document.getElementsByTagName("input");

			//遍历input标签，获取下级checkbox
			for(var i = 0; i < inputs.length; i++){
				var ele = inputs[i];

				//判断type是“checkbox”，并且checkbox的parentId等于entity的id
				if(ele.type == "checkbox" && ele.parentId == entity.id){
					chkArray.push(ele);
				}
			}
		}
		return chkArray;
	}

	//获取checkbox的同级checkbox信息
	//@entity : checkbox的DOM对象
	function findBrotherCheckBox(entity){

		//存放同级checkbox的数组
		var chkArray = new Array();

		//判断是否有input标签
		if(document.getElementsByTagName("input")){

			//获取所有的input标签
			var inputs = document.getElementsByTagName("input");

			//遍历input标签，获取同级checkbox
			for(var i = 0; i < inputs.length; i++){
				var ele = inputs[i];

				//判断type是“checkbox”，并且checkbox的parentId等于entity的parentId
				if(ele.type == "checkbox" && ele.parentId == entity.parentId){
					chkArray.push(ele);
				}
			}
		}
		return chkArray;
	}

	//获取checkbox的上级checkbox信息
	//@entity : checkbox的DOM对象
	function findParentCheckBox(entity){

		//存放上级checkbox的对象
		var _element = null;

		//判断是否有input标签
		if(document.getElementsByTagName("input")){

			//获取所有的input标签
			var inputs = document.getElementsByTagName("input");

			//遍历input标签，获取上级checkbox
			for(var i = 0; i < inputs.length; i++){
				var ele = inputs[i];

				//判断type是“checkbox”，并且checkbox的id等于entity的parentId
				if(ele.type == "checkbox" && ele.id == entity.parentId){
					_element = ele;
					break;
				}
			}
		}
		return _element;
	}

	//设置checkbox的下级checkbox的状态
	//@entity : checkbox的DOM对象
	function setChildCheckBox(entity){

		//entity的选中状态
		var status = entity.checked;

		//获取entity的下级checkbox
		var childList = findChildCheckBox(entity);

		//判断是否有下级
		if(childList.length > 0){

			//遍历下级checkbox，并设置状态
			for(var i = 0; i < childList.length; i++){
				childList[i].checked = status;

				//设置childList[i]的下级checkbox的状态
				setChildCheckBox(childList[i]);
			}
		}
	}

	//设置checkbox的上级checkbox的状态
	//@entity : checkbox的DOM对象
	function setParentCheckBox(entity){

		//entity的上级checkbox的选中状态
		var parentChecked = true;

		//获取entity的上级checkbox
		var parentCheckBox = findParentCheckBox(entity);

		//判断是否有上级
		if(parentCheckBox){

			//获取entity的同级checkbox
			var brotherList = findBrotherCheckBox(entity);

			//判断是否有同级
			if(brotherList.length > 0){
				
				//遍历同级checkbox
				for(var i = 0; i < brotherList.length; i++){

					//如果同级的checkbox有未选中的状态，则设置上级的checkbox的状态为false
					if(brotherList[i].checked == false){
						parentChecked = false;
						break;
					}
				}
			}

			//设置上级checkbox的选中状态
			parentCheckBox.checked = parentChecked;

			//设置parentCheckbox的上级checkbox的状态
			setParentCheckBox(parentCheckBox);
		}
	}

 效果如下：

评论

5 楼 02221021 2009-07-20  

.setAttribute(key, value)
.getAttribute(key)

4 楼 lib 2009-07-20  

<div class="quote_title">jltest 写道</div>
<div class="quote_div">使用jquery读自定义属性。<br>
</div>
<p> </p>
<p>楼上的理解错误了。即使不使用jQuery也可以读取自定属性的，（对象.属性名称）即可。</p>
<p> </p>
<p>我的问题是：自定义属性在其他的浏览器中不支持，在不借助其他JS框架的情况下，应如何实现？</p>

3 楼 jltest 2009-07-20  

使用jquery读自定义属性。

2 楼 lib 2009-07-20  

多谢楼上的朋友指出的问题。当时确实没有考虑跨浏览器的问题。

当初在开发时没有想出好的办法，如果不使用自定义属性，那么有什么其他的办法可以实现吗？希望大家可以提供一个思路。先谢谢大家了！！

1 楼 02221021 2009-07-19  

嘿嘿,挑了1段看下
function findChildCheckBox(entity){  
 
    //存放下级checkbox的数组  
    var chkArray = new Array();  var chkArray = []
 
    //判断是否有input标签  
    if(document.getElementsByTagName("input")){   此if语句多余
 
        //获取所有的input标签  
        var inputs = document.getElementsByTagName("input");  
 
        //遍历input标签，获取下级checkbox  
        for(var i = 0; i < inputs.length; i++){  
            var ele = inputs[i];  
 
            //判断type是“checkbox”，并且checkbox的parentId等于entity的id  
            if(ele.type == "checkbox" && ele.parentId == entity.id){  给节点添加自定义属性不大好,再说ele.parentId 不能再FF中用吧.
                chkArray.push(ele);  
            }
        }  
    }  
    return chkArray;  
}