jQuery实现联动全选（checkTree）

admin · 发表于 2014-2-18 08:30:31

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

<!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">
/*插件代码*/
;
(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);
/*执行*/
$(".J_CheckWrap").checktree();
</script>
</body>
</html>

复制代码

		自动登录	找回密码
密码			立即注册

[jQuery/Js/AJAX] jQuery实现联动全选（checkTree）

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子