树checkbox选择jquery实例
2024-09-04 17:35:28
<!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>
最新文章
- java-w3c.document生成xml文件
- 使用MAT(Memory Analyzer Tool)工具分析dump文件--转
- 风口之下,猪都能飞。当今中国股市牛市,真可谓“错过等七年”。 给你一个回顾历史的机会,已知一支股票连续n天的价格走势,以长度为n的整数数组表示,
- bzoj1724: [Usaco2006 Nov]Fence Repair 切割木板
- 白话学习MVC(六)模型绑定
- 你所不了解的setTimeout
- mm
- Android 异步加载
- 讲解下for循环的用法,加深记忆
- js检测浏览器中是否安装了flash播放插件
- 微信小程序-滚动消息通知效果
- Zabbix监控之迁移zabbix server
- DotNetCore跨平台~Json动态序列化属性
- 究竟谁在绑架中国的4G政策?
- Python迭代和解析(5):搞懂生成器和yield机制
- 使用fetch调用node.js的Resuful服务
- 图解HTTP第六章
- <;自动化测试方案_6>;第六章、API自动化测试
- jlet
- JS读取XML文件数据并以table显示数据(兼容IE火狐)