![jquery 多选框的问题]( "jquery 多选框的问题")
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.7.1.min.js"></script>
<style>
.hide{display: none;}
</style>
</head>
<body>
<form action="">
<span><input type="checkbox" name="" id="selall">全选/取消</span>
<ul>
<li>
<span>安徽省</span>
<input type="checkbox" level="sub" name="sub[]" value="1" id="">
<ul>
<li class="hide">
<span>安庆市</span>
<input type="checkbox" name="sub[]" level="sub1" id="">
<span>蚌埠市</span>
<input type="checkbox" name="sub[]" level="sub1" id="">
<span>亳州市</span>
<input type="checkbox" name="sub[]" level="sub1" id="">
<span>巢湖市</span>
<input type="checkbox" name="sub[]" level="sub1" id="">
<span>池州市</span>
<input type="checkbox" name="sub[]" level="sub1" id="">
</li>
</ul>
</li>
<li>
<span>福建省</span>
<input type="checkbox" name="sub[]" level="sub" value="2" id="">
<ul>
<li class="hide">
<span>龙岩市</span>
<input type="checkbox" name="sub[]" level="sub1" id="">
<span>南平市</span>
<input type="checkbox" name="sub[]" level="sub1" id="">
<span>泉州市</span>
<input type="checkbox" name="sub[]" level="sub1" id="">
<span>厦门市</span>
<input type="checkbox" name="sub[]" level="sub1" id="">
</li>
</ul>
</li>
<li>
<span>甘肃省</span>
<input type="checkbox" name="sub[]" level="sub" value="3" id="">
<ul>
<li class="hide">
<span>天水市</span>
<input type="checkbox" name="sub[]" level="sub1" id="">
<span>兰州市</span>
<input type="checkbox" name="sub[]" level="sub1" id="">
<span>白银市</span>
<input type="checkbox" name="sub[]" level="sub1" id="">
<span>庆阳市</span>
<input type="checkbox" name="sub[]" level="sub1" id="">
</li>
</ul>
</li>
</ul>
</form>
<script>
$(function(){
/**
* jQuery 1.7
*/
//全选.取消
$("#selall").click(function(){
$("input[level='sub']").prop("checked",this.checked);
$("input[level='sub']").each(function(index,val) {
$("input[level='sub']").eq(index).parent("li").find("input[level='sub1']").prop("checked",val.checked);
if(val.checked){
$("input[level='sub']").eq(index).parent("li").find(".hide").show();
}else{
$("input[level='sub']").eq(index).parent("li").find(".hide").hide();
}
});
})
//一级
$("input[level='sub']").click(function() {
$subs = $("input[level='sub']");
console.info($subs.length);
$("#selall").prop("checked" , $subs.length == $subs.filter(":checked").length ? true :false);
if(this.checked){
$(this).parent("li").find(".hide").show();
}else{
$(this).parent("li").find(".hide").hide();
}
//二级选择
$(this).parent("li").find("input[level='sub1']").prop("checked",this.checked);
});
//二级
$("input[level='sub1']").click(function() {
//一级选择
$parentlen = $(this).parent("li").find("input[level='sub1']");
//如果子级有一个选中那么父级就选中
$(this).parent("li").parent("ul").parent("li").find("input[level='sub']").prop("checked" , $parentlen.filter(":checked").length>0 ? true :false);
//全选.取消,如果所有的省市都选中，那么全选按钮也选中
$subs = $("input[level='sub']");
$sub1s = $("input[level='sub1']");
$subslength = $subs.length+$sub1s.length;
$slesubleng = $subs.filter(":checked").length+$sub1s.filter(":checked").length;
$("#selall").prop("checked",$subslength ==$slesubleng ? true :false);
});
})
</script>
</body>
</html>
