checkbox 多级状态联动选择

最新推荐文章于 2022-05-09 17:55:44 发布

hoyche

最新推荐文章于 2022-05-09 17:55:44 发布

阅读量5.9k

点赞数

分类专栏：自己写的文章标签： js

本文链接：https://blog.csdn.net/hoyche/article/details/80453846

版权

自己写的专栏收录该内容

15 篇文章

订阅专栏

这篇博客探讨了如何利用JavaScript实现多级Checkbox的选择状态联动。通过设置特定属性，如'rechild'、'resibling'和'reparent'，在Checkbox触发事件时，递归更新其子级、同级及上级的状态，确保整个选择结构的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 需要配合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"));
		}
	}
}