// 需要配合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"));
}
}
}
checkbox 多級狀態聯動選擇
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.