checkbox 多級狀態聯動選擇

// 需要配合html設置特定屬性
// rechild是指定它的下一級
// resibling是指定它的同級
// reparent是指定它的上一級
// 思路就是當前元素觸發事件之後,先循環設置子級,子級還存在子級就繼續循環下去,直到沒有子級
// 之後循環同級,通過循環同級確定父級的選擇狀態
// 在通過父級的同級確定父級的父級的選擇狀態,直到沒有父級
$(":checkbox").change(function(){
	var $t = $(this),
		val = this.checked,
		child = $t.attr("rechild"),
		sibling = $t.attr("resibling");
	// 防止頻繁點擊
	if( $("body").data("sending") ){
		this.checked = !val;
		return false;
	}
	Cart.addDis();
	if ( child ){
		_iteraChild($(child).filter(":visible"));
	}
	if ( sibling ){
		_interaSib($(sibling).filter(":visible"));
	}
	// 當操作下一級時,如果被循環下一級的元素也存在下一級,就調用本身循環它的下一級
	// 如果存在同一級時,就循環同一級,以確定這一級的上一級的狀態
	function _iteraChild( $child ){
		var _parent = $child.attr("reparent");
		$child.each(function(){
			this.checked = val;
			var $t = $(this),
				_sibling = $t.attr("resibling"),
				_child = $t.attr("rechild");
			if( _child ) {
				_iteraChild($(_child).filter(":visible"));
			}
			if( _sibling ){
				_interaSib($(_sibling).filter(":visible"));
			}
		});
	}
	// 確認上一級的狀態,如果存在上一級就傳遞給上一級的選擇狀態值bool
	function _interaSib( $sib ){
		var _bool,
			_parent = $sib.attr("reparent");
		$sib.each(function(){
			return _bool = this.checked;
		});
		if( _parent ){
			_interaParent($(_parent).filter(":visible"),_bool);
		}
	}
	// 如果存在同級就調用同級
	function _interaParent( $parent, _bool ){
		$parent.each(function(){
			this.checked = _bool;
		})
		var _sibling = $parent.attr("resibling");
		if ( _sibling ){
			_interaSib($(_sibling).filter(":visible"));
		}
	}
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章