<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
ul,ul li{
list-style: none;
}
</style>
</head>
<body>
<ul>
<li class="node"><input type="checkbox" name="box">权限管理
<ul>
<li class="node"><input type="checkbox" name="box">档案管理
<ul>
<li class="node"><input type="checkbox" name="box">档案管理</li>
<li class="node"><input type="checkbox" name="box">销售查询</li>
<li class="node"><input type="checkbox" name="box">出库管理</li>
</ul>
</li>
<li class="node"><input type="checkbox" name="box">销售查询
<ul>
<li class="node"><input type="checkbox" name="box">档案管理</li>
<li class="node"><input type="checkbox" name="box">销售查询</li>
<li class="node"><input type="checkbox" name="box">出库管理</li>
</ul>
</li>
<li class="node"><input type="checkbox" name="box">出库管理
<ul>
<li class="node"><input type="checkbox" name="box">档案管理</li>
<li class="node"><input type="checkbox" name="box">销售查询</li>
<li class="node"><input type="checkbox" name="box">出库管理</li>
</ul>
</li>
</ul>
</li>
</ul>
<script type="text/javascript" src="../js/jquery.min.js" ></script>
<script type="text/javascript">
$(function(){
$(".node>input").click(function() {
var checkedval = this.checked; //获取点击是选中还是取消选中 选中==true 取消选中==false
$(this).parent("li").find("input").prop("checked",checkedval); //设置选中内容的子节点是选中还是取消选中
if(checkedval){ //这个是与父节点关联的 如果这个是true 就选中他的所有的父节点
$(this).parents('.node').children("input").prop("checked",checkedval);
}else{ //否则的话就判断他的兄弟节点是否是全部都取消了选中 如果是 就取消父节点的选中 如果否则父节点就不用更改
//获取当前节点的所有的兄弟节点
//扩展一下：prev()获取前一个兄弟节点 next()获取后面一个兄弟节点 prevAll()获取前面所有的兄弟节点 nextAll()获取后面的所有的兄弟节点
var arr = $(this).parent("li").siblings();
var check = false; //设置一个默认值 用来判断是否改变父节点的选中
//for循环所有的兄弟节点 看看是否有选中的兄弟节点
for(var i=0;i<arr.length;i++){
var bool = $(arr[i]).children("input").is(':checked');
if(bool){ //如果兄弟节点是选中状态 给check赋值，代表父节点不做修改
check = bool;
}
}
//如果所有的兄弟节点都是未选中的话 就取消父节点的选中状态
if(!check){
$(this).parents('.node').children("input").prop("checked",checkedval);
}
}
});
});
</script>
</body>
</html>
实现了选中子节点，父节点默认选中，选中父节点，所有的子节点默认选中，取消选中所有的子节点，父节点也随之取消选中！
2136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
