多级 checkbox 父子类关联勾选

最新推荐文章于 2024-04-15 14:25:59 发布

待鸣

最新推荐文章于 2024-04-15 14:25:59 发布

阅读量5.2k

点赞数 1

分类专栏：前端技术文章标签： html checkbox

本文链接：https://blog.csdn.net/oZuoYu123/article/details/77879587

版权

前端技术专栏收录该内容

20 篇文章 1 订阅

订阅专栏

场景

设定用户组的时候需要勾选节点，多级节点的情况很多

解决

jq使用 1.6 左右的。

jqery.checktree.js

;
(function (win, doc, $) {
	$.fn.extend({
		checktree : function () {
			this.click(function (evt) {
				var evtEle = $(evt.target).closest("input:checkbox");
				if (!evtEle[0]) {
					return;
				}
				//check child all
				evtEle.parent().next(".checks").find("input:checkbox").attr("checked", evtEle[0].checked);

				//check parent
				if (evtEle.is("input:checked")) {
					evtEle.parents(".checks").each(function () {
						!$(this).children("p").children("input:checkbox").filter(function () {
							return !this.checked;
						})[0] && $(this).prev().children("input:checkbox").attr("checked", "checked");
					});
				} else {
					evtEle.parents(".checks").prev().children("input:checkbox").attr("checked", false);
				}
			});
		}
	});
})(window, document, jQuery);

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>checkTree</title>
<style type="text/css">
div,p{margin:0;padding:0; line-height:1.5;}
.checks{ padding-left:20px;}
</style>
</head>
<body>
<div class="J_CheckWrap">
	<p><input type="checkbox" />一级</p>
	<div class="checks">
		<p><input type="checkbox" />二级</p>
		<div class="checks">
			<p><input type="checkbox" />三级</p>
			<p><input type="checkbox" />三级</p>
			<p><input type="checkbox" />三级</p>
			<div class="checks">
				<p><input type="checkbox" />四级</p>
				<div class="checks">
					<p><input type="checkbox" />五级</p>
					<p><input type="checkbox" />五级</p>
					<div class="checks">
						<p><input type="checkbox" />六级</p>
						<p><input type="checkbox" />六级</p>
					</div>
				</div>
				<p><input type="checkbox" />四级</p>
			</div>
		</div>
		<p><input type="checkbox" />二级</p>
		<p><input type="checkbox" />二级</p>
		<div class="checks">
			<p><input type="checkbox" />三级</p>
			<div class="checks">
				<p><input type="checkbox" />四级</p>
				<p><input type="checkbox" />四级</p>
			</div>
			<p><input type="checkbox" />三级</p>
			<p><input type="checkbox" />三级</p>
		</div>
		<p><input type="checkbox" />二级</p>
		<p><input type="checkbox" />二级</p>
		<div class="checks">
			<p><input type="checkbox" />三级</p>
			<p><input type="checkbox" />三级</p>
			<div class="checks">
				<p><input type="checkbox" />四级</p>
				<p><input type="checkbox" />四级</p>
			</div>
			<p><input type="checkbox" />三级</p>
		</div>
		<p><input type="checkbox" />二级</p>
	</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.checktree.js"></script>
<script>
$(".J_CheckWrap").checktree();
</script>
</body>
</html>

待鸣

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
多级 checkbox 父子类关联勾选

场景设定用户组的时候需要勾选节点，多级节点的情况很多解决jq使用 1.6 左右的。jqery.checktree.js;(function (win, doc, $) { $.fn.extend({ checktree : function () { this.click(function (evt) { var evtEle = $(evt.
复制链接

扫一扫