如图
需求：
（1）：选中一级文字（全选）或者一级复选框（checkbox），做到全选的效果
（2）：选中二级文字，切换二级样式和三级对应内容，选中二级复选框，对应三级全部选中。若二级全部选中，则一级为选中状态
（3）：选中三级文字或者复选框，默认选中当前项。若当前三级全部选中，对应的二级也应该选中
代码（注意：复制下来直接可以用，jquery需本地引入）
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>Blank Page - Ace Admin</title>
<script src="js/jquery-2.1.4.min.js"></script>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<style>
.cont {
width: 100%;
position: relative;
overflow: hidden;
height: 100px;
}
.divRow {
width: 100%;
margin-bottom: 10px;
text-indent: 10px;
cursor: pointer;
}
.listbox {
overflow: hidden;
margin-bottom: 5px;
display: inline-block;
float: left;
}
.listleft {
float: left;
padding: 5px 10px;
border-bottom: 0px;
border-bottom: solid 1px #ccc;
cursor: pointer;
}
.listright {
padding: 5px 10px;
display: block;
float: left;
position: absolute;
top: 76px;
left: 0;
}
.listright label.position-relative {
margin-left: 40px;
cursor: pointer;
}
.listright label.position-relative:first-child {
margin-left: 0px;
}
.addleftClass {
border-top: solid 1px #ccc;
border-left: solid 1px #ccc;
border-right: solid 1px #ccc;
border-bottom: 0px;
}
</style>
</head>
<body class="no-skin">
<div class="cont">
<!-- <div class="divRow">
<label class="position-relative menu-all">
<input type="checkbox" class="ace check1" />
</label>
<span class="checkValue" id="allCheck"></span>
</div>
<div class="listbox">
<div class="listleft addleftClass">
<label class="position-relative">
<input type="checkbox" class="ace check2" name="node_ids[]"/>
</label> 默认分组
</div>
</br>
<div class="listright">
<label class="position-relative">
<input type="checkbox" class="ace check3"/>
合肥论坛
</label>
<label class="position-relative">
<input type="checkbox" class="ace check3" />
合肥热线
</label>
<label class="position-relative">
<input type="checkbox" class="ace check3" />
合肥先锋网
</label>
</div>
</div>
<div class="listbox">
<div class="listleft">
<label class="position-relative">
<input type="checkbox" class="ace check2" name="node_ids[]"/>
</label> 重点网站
</div>
</br>
<div class="listright" style="display: none;">
<label class="position-relative">
<input type="checkbox" class="ace check3" />
重点网站1
</label>
<label class="position-relative">
<input type="checkbox" class="ace check3" />
重点网站2
</label>
</div>
</div>
<div class="listbox">
<div class="listleft">
<label class="position-relative">
<input type="checkbox" class="ace check2" name="node_ids[]"/>
</label> 普通网站
</div>
</br>
<div class="listright" style="display: none;">
<label class="position-relative">
<input type="checkbox" class="ace check3" />
普通网站1
</label>
<label class="position-relative">
<input type="checkbox" class="ace check3" />
普通网站2
</label>
<label class="position-relative">
<input type="checkbox" class="ace check3" />
普通网站3
</label>
</div>
</div> -->
</div>
<!--[if !IE]> -->
<script type="text/javascript">
window.jQuery || document.write("<script src=‘../assets/js/jquery.min.js‘>" + "<" + "/script>");
</script>
<script>
var checkList = [{
name: ‘全选‘,
id: 1,
host: 1,
children: [{
name: "默认分组",
id: 11,
host: 11,
children: [{
name: "合肥论坛",
id: 111,
host: 111,
}, {
name: "合肥热线",
id: 112,
host: 112,
}, {
name: "合肥先锋网",
id: 113,
host: 113,
}]
}, {
name: "重点网站",
id: 22,
host: 22,
children: [{
name: "重点网站1",
id: 221,
host: 221,
}, {
name: "重点网站2",
id: 222,
host: 222,
}]
}, {
name: "普通网站",
id: 33,
host: 33,
children: [{
name: "普通网站1",
id: 331,
host: 331
}, {
name: "普通网站2",
id: 332,
host: 332
}]
}]
}]
var check3List = []
$(document).ready(function() {
var checkTwoF = ‘<div class="divRow">‘;
checkTwoF += ‘<label class="position-relative menu-all">‘;
checkTwoF += ‘<input type="checkbox" class="ace check1" id="allButton"/>‘
checkTwoF += ‘</label>‘;
checkTwoF += ‘<span class="checkValue">‘ + checkList[0].name + ‘</span>‘;
checkTwoF += ‘</div>‘
for (var i = 0; i < checkList[0].children.length; i++) {
checkTwoF += ‘<div class="listbox">‘;
if (i == 0) {
checkTwoF += ‘<div class="listleft addleftClass">‘;
} else {
checkTwoF += ‘<div class="listleft">‘;
}
checkTwoF += ‘<label class="position-relative">‘;
checkTwoF += ‘<input type="checkbox" class="ace check2" name="node_ids[]"/>‘;
checkTwoF += ‘</label>‘ + checkList[0].children[i].name;
checkTwoF += ‘</div>‘;
checkTwoF += ‘</br>‘;
if (i == 0) {
checkTwoF += ‘<div class="listright">‘;
} else {
checkTwoF += ‘<div class="listright" style="display: none;">‘;
}
for (var j = 0; j < checkList[0].children[i].children.length; j++) {
checkTwoF += ‘<label class="position-relative">‘;
checkTwoF += ‘<input type="checkbox" class="ace check3" />‘ + checkList[0].children[i].children[j].name;
checkTwoF += ‘</label>‘;
}
checkTwoF += ‘</div>‘;
checkTwoF += ‘</div>‘;
}
$(".listleft:first").addClass("addleftClass")
$(".cont").html(checkTwoF)
})
$(function() {
check3();
check2();
check1();
checkInput();
check2Value()
})
// 点击全选文字
function checkInput() {
$(‘.checkValue‘).click(function() {
var checkValue = $(this).siblings().find(".check1").prop("checked")
if (checkValue == false) {
$(this).siblings().find(".check1").prop("checked", true)
$(this).parent().siblings().find("input[type=‘checkbox‘]").prop(‘checked‘, true);
} else if (checkValue == true) {
$(this).siblings().find(".check1").prop("checked", false)
$(this).parent().siblings().find("input[type=‘checkbox‘]").prop(‘checked‘, false);
}
})
};
// 点击全选框
function check1() {
$(‘.check1‘).click(function() {
var ok = $(this).prop("checked");
$(this).parents(‘.divRow‘).siblings().find("input[type=‘checkbox‘]").prop(‘checked‘, ok);
})
}
function check2() {
$(‘.listleft‘).click(function() {
$(this).addClass("addleftClass")
$(this).parent(‘.listbox‘).siblings().find(".listleft").removeClass("addleftClass")
$(this).siblings().css("display", ‘block‘)
$(this).parent(".listbox").siblings().find(".listright").css("display", ‘none‘)
})
}
function check2Value() {
$(".check2").click(function() {
var ok = $(this).prop("checked");
$(this).parents(".listleft").siblings().andSelf().find(‘.check3‘).prop("checked", ok);
var oCheck2 = $(this).parents(‘.listbox‘).siblings().andSelf().find(".check2");
if (($(".listbox").find("input[type=‘checkbox‘]:checked").length) == $(".listbox").find("input[type=‘checkbox‘]").length) {
$("#allButton").prop("checked", true);
} else {
$("#allButton").prop("checked", false);
}
})
}
function check3() {
$(‘.check3‘).click(function() {
var ockeck3 = $(this).parent().siblings().andSelf().find(".check3");
var ockeck3Value = $(this).parent().siblings().andSelf().find(".check3").prop("checked")
if (ockeck3Value == true) {
check3List.push(ockeck3Value)
} else {
check3List.pop(ockeck3Value)
};
if ($(this).parents(".listright").find("input[type=‘checkbox‘]").length == $(this).parents(".listright").find("input[type=‘checkbox‘]:checked").length) {
$(this).parents(".listright").siblings(".listleft").find("input[type=‘checkbox‘]").prop("checked", true)
} else {
$(this).parents(".listright").siblings(".listleft").find("input[type=‘checkbox‘]").prop("checked", false)
}
var oCheck1 = $(this).parents(‘.listbox‘).siblings().andSelf().find(‘.check2‘);
if (($(".listbox").find("input[type=‘checkbox‘]:checked").length) == $(".listbox").find("input[type=‘checkbox‘]").length) {
$("#allButton").prop("checked", true);
} else {
$("#allButton").prop("checked", false);
}
})
}
// 找同级元素的checked状态
function trueorfalse(obj) {
var bool = false;
$(obj).each(function() {
if ($(this).prop("checked")) {
bool = true;
}
})
return bool;
}
</script>
</body>
</html>