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);
		}
	}

 效果如下：