jquery treeview checkbox选中子目录，同时选中父目录，关联选择

最新推荐文章于 2021-11-05 15:20:17 发布

cg_program

最新推荐文章于 2021-11-05 15:20:17 发布

阅读量4.9k

点赞数

分类专栏： Jquery 文章标签： jquery function stylesheet class input generator

Jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery treeview 的选中子目录，同时选中父目录，关联选择</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link type="text/css" href="css/css.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//wirted by qq:190988779 at 2010-1-5 9:52:08
//可以配合jquery treeview使用效果很好。
$(document).ready(function(){
$(".content input[type='checkbox'][name='c']").click(function(){
//子目录
var c = $(this).parent().find("input");
var b = $(this).attr('checked');
c.each(function(){
$(this).attr('checked',b);
});
var m = $(this).parent().parent('ul').find('input');
var count = 0;
m.each(function(){
if($(this).attr('checked')){
count++;
}
});
//父目录
var p = $(this).parents('li');//父目录
p.each(function(){
var o = $(this).find('input');
if(count){
o[0].checked = true;
}else{
o[0].checked = !o[0].checked;
}
});
$(this).attr('checked',b);
});
});
</script>

</head>
<body>
<div id="divMsg"> </div>
<div class="content">
<h1>jquery treeview 的选中子目录，同时选中父目录，关联选择</h1>
<ul class="scrollBox">
<li><input type="checkbox" name="c" value=2 /><a href="#">2</a>  </li>
<li><input type="checkbox" name="c" value=3 /><a href="#">3</a>
<ul class="d">
<li><input type="checkbox" name="c" value=6 /><a href="#">6</a></li>
<li><input type="checkbox" name="c" value=5 /><a href="#">5</a>
<ul class="class100">
<li><input type="checkbox" name="c" value=111 /><a href="#">111</a></li>
<li><input type="checkbox" name="c" value=100 /><a href="#">100</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
</ul>
</div>

</body>
</html>