关于input事件是否全选以及如何获取checked的值的相关问题

做个记录，方便查找，直接上代码

<div class="qx">
<input type="checkbox" />
<label>全选</label>
</div>
<ul class="list-ch">
<li>
<div class="toggle-btn">
<span class="fa fa-plus-circle"></span>
经信委
</div>
<ul class="tree-list"><!--通过这个类名来隐藏样式-->
<li>
<div>
测试部门1
<span class="fa right-fa"></span>
<input type="checkbox" />
</div>
</li>
<li>
<div>
测试部门2
<span class="fa right-fa"></span>
<input type="checkbox" />
</div>
</li>
<li>
<div class="toggle-btn">
<span class="fa fa-plus-circle"></span>
测试部门3
</div>
<ul>
<li>
<div class="toggle-btn">
<span class="fa fa-plus-circle"></span>
测试部门2
</div>
<ul class="tree-list">
<li>
<div>
测试部门5
<span class="fa right-fa"></span>
<input type="checkbox" />
</div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div>
县委部
<span class="fa right-fa"></span>
<input type="checkbox" />
</div>
</li>
<li>
<div>
林业部
<span class="fa right-fa"></span>
<input type="checkbox" />
</div>
</li>
</ul>
</li>
</ul>

下面是js的代码

<script type="text/javascript">
$(document).ready(function(){
$(".toggle-btn").click(function(){
//这是通过点击事件来展开或关闭树形结构的选项，我这是直接展开和关闭，如果要用滑动请用slideDown,和slideUp
$(this).parent().find("ul").toggleClass("tree-list");
$(this).find(".fa").toggleClass("fa-plus-circle");
$(this).find(".fa").toggleClass("fa-minus-circle");//这两句话切换了相应的图标
});
$(".list-ch li div").click(function(){//点击整个父元素
var _check = $(this).children("input").prop("checked");//取得当前元素的input子元素的checked值
if(_check==false){//通过判断它有无值，进行接下来的工作
$(this).children("input").prop("checked",true);//这个位置最好用prop,而不要用attr,前者返回布尔类型的值；后者如果当前input中初始化未定义checked属性，则不管当前是否选中，都会返回undefined，如果当前input中初始化已定义checked属性，则不管是否选中，都会返回checked.
$(this).find(".fa").removeClass("right-fa").addClass("fa-check");//这个地方给它在不选中的情况下配置一个className，方便用来判断有没有全部选中
}else if(_check==true){
$(this).children("input"
89f9
).prop("checked",false);//这个地方最好不要用removeProp(),因为removeProp()会移除当前jQuery对象所匹配的每一个元素上指定名称的属性，所以只要给prop赋值为false就可以了。
$(this).find(".fa").removeClass("fa-check").addClass("right-fa");
}
var _l = $(".right-fa").length;
if(_l > 0){
$(".qx input").prop("checked",false);
}else{
$(".qx input").prop("checked",true);
}
});
$(".qx input").click(function(){
var _check = $(this).prop("checked");//通过这个值判断全选按钮有没有触发
if(_check==true){
$(".list-ch").find("input").prop("checked",true);
$(".list-ch").find(".right-fa").removeClass("right-fa").addClass("fa-check");//这个位置要注意，在查找元素的时候，一定只有要改变的元素，不能有多余元素
}else if(_check==false){
$(".list-ch").find("input").prop("checked",false);
$(".list-ch").find(".fa-check").removeClass("fa-check").addClass("right-fa");
}
});

});
</script>

我这个用的是加载完成后的事件方式，如果是通过js加载的html,建议在内部加入事件方法，直接调用，否则功能不能实现。

最后，上码上全套，把css也上上来

.qx{ width: 100%; padding: 0 15px; line-height: 38px; border-bottom: 1px solid #ddd;}
.qx input{ display: block; width: 20px; height: 20px; float: left; margin-top: 8px; margin-right: 10px;}
.list-ch{width: 100%;}
.list-ch li{ width: 100%;}
.list-ch li div{position: relative; width: 100%; padding: 5px 0; padding-left: 35px; line-height: 26px; border-bottom: 1px solid #ddd;}
/*.list-ch li .toggle-btn{}*/
.list-ch li .fa{ display: block; width: 20px; height: 20px; font-size: 18px; line-height: 20px; text-align: center;}
.list-ch li .fa-plus-circle, .list-ch li .fa-minus-circle{ position: absolute; left: 10px; top: 8px; border-radius: 3px; color: #ccc;}
.list-ch li .right-fa, .list-ch li .fa-check{float: right; margin-top: 3px; margin-right: 10px; color: #2E6DA4;}
.list-ch li input{position: absolute; display: block; right: 8px; top:4px; width: 0px; height: 0px; opacity: 0;}
.list-ch li li div{ padding-left: 60px;}
.list-ch li li li div{ padding-left: 85px;}
.list-ch li li .fa-plus-circle, .list-ch li li .fa-minus-circle{ left: 35px;}
.list-ch li li li .fa-plus-circle, .list-ch li li li .fa-minus-circle{ left: 60px;}
.tree-list{ display: none;}

本人，还是小白，写的不好望见谅，希望各位大神多多指点。