<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Wendy">
<title>JQuery树形代码</title>
<style>
</style>
</head>
<body>
<ul class="tul">
<li>
<input type="checkbox" data="a" class="achild">
<span>aaa</span>
<ul class="tul">
<li>
<input type="checkbox" data="b" class="achild">
<span>bbb</span>
<ul class="tul">
<li>
<input type="checkbox" data="c" class="achild">
<span>ccc</span>
<ul class="tul">
<li>
<input type="checkbox" data="d" class="achild">
<span>ddd</span>
<ul class="tul">
<li>
<input type="checkbox" data="e" class="achild">
<span>eee</span>
<ul class="tul">
<li>
<input type="checkbox" data="f" class="achild">
<span>fff</span>
</li>
<li>
<input type="checkbox" data="f" class="achild">
<span>fff</span>
</li>
<li>
<input type="checkbox" data="f" class="achild">
<span>fff</span>
</li>
</ul>
</li>
<li>
<input type="checkbox" data="e" class="achild">
<span>eee</span>
</li>
<li>
<input type="checkbox" data="e" class="achild">
<span>eee</span>
</li>
</ul>
</li>
<li>
<input type="checkbox" data="d" class="achild">
<span>ddd</span>
</li>
<li>
<input type="checkbox" data="d" class="achild">
<span>ddd</span>
</li>
</ul>
</li>
<li>
<input type="checkbox" data="c" class="achild">
<span>ccc</span>
<ul class="tul">
<li>
<input type="checkbox" data="d" class="achild">
<span>ddd</span>
</li>
<li>
<input type="checkbox" data="d" class="achild">
<span>ddd</span>
</li>
<li>
<input type="checkbox" data="d" class="achild">
<span>dd</span>
</li>
</ul>
</li>
<li>
<input type="checkbox" data="c" class="achild">
<span>ccc</span>
</li>
</ul>
</li>
<li>
<input type="checkbox" data="b" class="achild">
<span>bbb</span>
</li>
<li>
<input type="checkbox" data="b" class="achild">
<span>bbb</span>
</li>
</ul>
</li>
</ul>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$('.achild').change(function() {
var obj = $(this);
/*上级判断*/
var objp = obj.parents('.tul');
if (objp.length > 0) {
for (var i = 0; i < objp.length; i++) {
/*上级标志*/
var data = objp.eq(i).find('li>.achild').attr('data');
/*关联级所有长度*/
var t = objp.eq(i).find('input[data=' + data + ']').length;
/*关联级已选取长度*/
var tc = objp.eq(i).find('input[data=' + data + ']:checked').length;
t == tc ? objp.eq(i).siblings('.achild').prop('checked', true) : objp.eq(i).siblings('.achild').prop('checked', false);
}
}
/*下级判断*/
if (obj.siblings('.tul').length > 0) {
obj.prop('checked') ? obj.siblings('.tul').find('.achild').prop('checked', true) : obj.siblings('.tul').find('.achild').prop('checked', false);
}
//
});
</script>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Wendy">
<title>JQuery树形代码</title>
<style>
</style>
</head>
<body>
<ul class="tul">
<li>
<input type="checkbox" data="a" class="achild">
<span>aaa</span>
<ul class="tul">
<li>
<input type="checkbox" data="b" class="achild">
<span>bbb</span>
<ul class="tul">
<li>
<input type="checkbox" data="c" class="achild">
<span>ccc</span>
<ul class="tul">
<li>
<input type="checkbox" data="d" class="achild">
<span>ddd</span>
<ul class="tul">
<li>
<input type="checkbox" data="e" class="achild">
<span>eee</span>
<ul class="tul">
<li>
<input type="checkbox" data="f" class="achild">
<span>fff</span>
</li>
<li>
<input type="checkbox" data="f" class="achild">
<span>fff</span>
</li>
<li>
<input type="checkbox" data="f" class="achild">
<span>fff</span>
</li>
</ul>
</li>
<li>
<input type="checkbox" data="e" class="achild">
<span>eee</span>
</li>
<li>
<input type="checkbox" data="e" class="achild">
<span>eee</span>
</li>
</ul>
</li>
<li>
<input type="checkbox" data="d" class="achild">
<span>ddd</span>
</li>
<li>
<input type="checkbox" data="d" class="achild">
<span>ddd</span>
</li>
</ul>
</li>
<li>
<input type="checkbox" data="c" class="achild">
<span>ccc</span>
<ul class="tul">
<li>
<input type="checkbox" data="d" class="achild">
<span>ddd</span>
</li>
<li>
<input type="checkbox" data="d" class="achild">
<span>ddd</span>
</li>
<li>
<input type="checkbox" data="d" class="achild">
<span>dd</span>
</li>
</ul>
</li>
<li>
<input type="checkbox" data="c" class="achild">
<span>ccc</span>
</li>
</ul>
</li>
<li>
<input type="checkbox" data="b" class="achild">
<span>bbb</span>
</li>
<li>
<input type="checkbox" data="b" class="achild">
<span>bbb</span>
</li>
</ul>
</li>
</ul>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$('.achild').change(function() {
var obj = $(this);
/*上级判断*/
var objp = obj.parents('.tul');
if (objp.length > 0) {
for (var i = 0; i < objp.length; i++) {
/*上级标志*/
var data = objp.eq(i).find('li>.achild').attr('data');
/*关联级所有长度*/
var t = objp.eq(i).find('input[data=' + data + ']').length;
/*关联级已选取长度*/
var tc = objp.eq(i).find('input[data=' + data + ']:checked').length;
t == tc ? objp.eq(i).siblings('.achild').prop('checked', true) : objp.eq(i).siblings('.achild').prop('checked', false);
}
}
/*下级判断*/
if (obj.siblings('.tul').length > 0) {
obj.prop('checked') ? obj.siblings('.tul').find('.achild').prop('checked', true) : obj.siblings('.tul').find('.achild').prop('checked', false);
}
//
});
</script>
</html>
276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
