<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://my.csdn.net/assets2/js/libs/jquery-1.9.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("input[type='checkbox']").click(function () {
var myid = $(this).attr("id");
//alert(myid);
var isSel = $(this).is(":checked");
selectChkbox(0, myid, isSel);
selectParentChkbox($(this));
});
});
//变更子节点
function selectChkbox(n,parentid, isSel) {
var len = $("input[type='checkbox']").length;
for (var i = n; i < len; i++) {
var inp = $("input[type='checkbox']").eq(i);
var pid = inp.attr("data-parent");
if (parentid == pid) {
if (isSel) {
inp.prop("checked", true);
} else {
inp.prop("checked", false);
}
selectChkbox(i, inp.attr("id"), isSel);
}
}
}
//变更父节点
function selectParentChkbox(clickINP) {
var parentid = clickINP.attr("data-parent");
if (parentid != "null") {
if (!clickINP.is(":checked")) {
selectParentChkF(parentid);
} else {
selectParentChkT(parentid);
}
}
}
function selectParentChkF(parentid) {
$("#" + parentid).prop("checked", false);
parentid = $("#" + parentid).attr("data-parent");
if (parentid != "null")
selectParentChkF(parentid);
}
function selectParentChkT(parentid) {
var parentSel = true;
$("input[type='checkbox']").each(function () {
var pid = $(this).attr("data-parent");
if (parentid == pid) {
if (!$(this).is(":checked")) {
parentSel = false;
}
}
});
if (parentSel) {
$("#" + parentid).prop("checked", true);
parentid = $("#" + parentid).attr("data-parent");
if (parentid != "null")
selectParentChkT(parentid);
} else {
selectParentChkF(parentid);
}
}
</script>
</head>
<body>
<div>
<div>A<input id="A" data-parent="null" type="checkbox" /></div>
<div style=" margin-left:16px;">B<input id="B" data-parent="A" type="checkbox" /></div>
<div style=" margin-left:32px;">B-1<input id="B-1" data-parent="B" type="checkbox" /></div>
<div style=" margin-left:32px;">B-2<input id="B-2" data-parent="B" type="checkbox" /></div>
<div style=" margin-left:48px;">B-2-1<input id="B-2-1" data-parent="B-2" type="checkbox" /></div>
<div style=" margin-left:48px;">B-2-2<input id="B-2-2" data-parent="B-2" type="checkbox" /></div>
<div style=" margin-left:16px;">C<input id="C" data-parent="A" type="checkbox" /></div>
<div style=" margin-left:32px;">D<input id="D" data-parent="C" type="checkbox" /></div>
<div style=" margin-left:32px;">E<input id="E" data-parent="C" type="checkbox" /></div>
</div>
</body>
</html>