jquery checkbox 三级联动=》优化（第三级切换）
第三层复选框做了切换
代码直接拿过来用，换一下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">全选</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>
<!-- <![endif]-->
<!--[if IE]>
<script type="text/javascript">
window.jQuery || document.write("<script src='../assets/js/jquery1x.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
<script>
$(function() {
check3();
check2();
check1();
checkInput();
})
// 点击全选文字
function checkInput() {
$('.checkValue').click(function() {
var checkValue = $(this).siblings().find(".check1").prop("checked")
console.log("checkValue", checkValue)
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() {
var ok = $(this).find(".check2").prop("checked");
$(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')
$(this).siblings().andSelf().find('.check3').prop("checked", ok);
var oCheck2 = $(this).parent('.listbox').siblings().andSelf().find(".check2");
$(this).parents('.listbox').siblings(".divRow").find('.check1').prop("checked", trueorfalse(oCheck2));
})
}
function check3() {
$('.check3').click(function() {
var ockeck3 = $(this).parent().siblings().andSelf().find(".check3");
$(this).parents('.listbox').find('.check2').prop("checked", trueorfalse(ockeck3));
var oCheck1 = $(this).parents('.listbox').siblings().andSelf().find('.check2');
$(this).parents('.listbox').siblings(".divRow").find('.check1').prop("checked", trueorfalse(oCheck1))
})
}
// 找同级元素的checked状态
function trueorfalse(obj) {
var bool = false;
$(obj).each(function() {
if ($(this).prop("checked")) {
bool = true;
}
})
return bool;
}
</script>
</body>
</html>
浙公网安备 33010602011771号