<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>code.cent123.com</title>
<link rel="stylesheet" href="./layui/css/layui.css">
<script src="jquery.js"></script>
<script src="./layui/layui.js"></script>
<script src="./json.js"></script>
<style>
.layui-form-item .layui-input-inline {
width: 300px;
}
form {
width: 990px;
margin: 0 auto;
}
.cat_col {
height: 400px;
width: 300px;
display: inline-block;
margin-right: 30px;
}
.cat_col dl {
display: block;
height: 400px;
}
.checkbox_span {
line-height: 25px;
cursor: pointer;
box-sizing: border-box;
display: inline-block;
vertical-align: bottom;
}
.level_2, .level_1 {
display: none;
}
</style>
</head>
<body>
<div style="padding: 20px; background-color: #F2F2F2;">
<div class="layui-row layui-col-space15">
<div>
<div>
<div>请选择</div>
<div>
<form class="layui-form article-form ajaxForm" method="post">
<div>
<div class="layui-form-select cat_col" style="">
<dl class="layui-anim layui-anim-upbit" id="level_0">
</dl>
</div>
<div class="layui-form-select cat_col" style="">
<dl class="layui-anim layui-anim-upbit" id="level_1">
</dl>
</div>
<div class="layui-form-select cat_col" style="margin-right: 0px;">
<dl class="layui-anim layui-anim-upbit" id="level_2">
</dl>
</div>
</div>
<div>
<div>
<button type="submit" lay-submit="">立即提交</button>
<button type="button" class="layui-btn layui-btn-primary" id="reset">重置</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
layui.use(['form'], function () {
var form = layui.form,
layer = layui.layer;
// 点击一级分类
$("body").on("click", ".level_0", function () {
var id = $(this).find("[type='checkbox']").val();
$(".level_1").css({
"display": "none"
});
$(".level_2").css({
"display": "none"
});
$(".parent_" + id).css({
"display": "block"
});
});
// 点击二级分类
$("body").on("click", ".level_1", function () {
var id = $(this).find("[type='checkbox']").val();
$(".level_2").css({
"display": "none"
});
$(".parent_" + id).css({
"display": "block"
});
});
$("body").on("click", ".layui-form-select i", function () {
var isChecked = $(this).parent().siblings('input').attr("checked") == "checked"; // jquery判断checkbox的选中状态
var id = $(this).parent().siblings('input').val();
var parent_id = $(this).parent().parent().attr('data-parent_id');
if (isChecked) {
// 未选中
$(this).parent().siblings("[type='checkbox']").attr("checked", false);
notCheckedParents(parent_id);
notCheckedChildren(id);
} else {
// 选中
$(this).parent().siblings("[type='checkbox']").attr("checked", true);
checkedParents(parent_id);
checkedChildren(id);
}
form.render();
// event.stopPropagation(); // 阻止事件冒泡
});
form.render();
});
/**
* 有一个选中则父级递归选中
* 一个子级只可能有一个父级
*/
function checkedParents(parent_id) {
var parent = $(".id_" + parent_id);
$(parent).find("[type='checkbox']").attr("checked", true);
$(parent).find("[type='checkbox']").prop("checked", true);
var parent_id2 = $(parent).attr('data-parent_id');
if (parent_id2 > 0) {
checkedParents(parent_id2);
}
}
/**
* 有一个选中则子级递归 全选中
*/
function checkedChildren(id) {
var children = $(".parent_" + id);
for (var i = 0; i < children.length; i++) {
$(children[i]).find("[type='checkbox']").attr("checked", true);
$(children[i]).find("[type='checkbox']").prop("checked", true);
var id2 = $(children[i]).find("[type='checkbox']").val();
if (id2 > 0) {
checkedChildren(id2);
}
}
}
/**
* 取消选中父类,判断父级是否全未选择,全未选中则取消父类
*/
function notCheckedParents(parent_id) {
var ids = [];
var parent = $(".parent_" + parent_id);
parent.each(function (index, element) {
if ($(element).find("[type='checkbox']").attr("checked") == "checked") {
var val = $(element).find("[type='checkbox']").val();
ids.push(val);
}
});
if (ids.length <= 0) {
$(".id_" + parent_id).find("[type='checkbox']").attr("checked", false);
$(".id_" + parent_id).find("[type='checkbox']").prop("checked", false);
var parent_id2 = $(".id_" + parent_id).attr('data-parent_id');
if (parent_id2 > 0) {
notCheckedParents(parent_id2);
}
}
}
/**
* 取消选中则子类全取消选中
*/
function notCheckedChildren(id) {
var children = $(".parent_" + id);
for (var i = 0; i < children.length; i++) {
$(children[i]).find("[type='checkbox']").attr("checked", false);
$(children[i]).find("[type='checkbox']").prop("checked", false);
var id2 = $(children[i]).find("[type='checkbox']").val();
if (id2 > 0) {
notCheckedChildren(id2);
}
}
}
createHtml();
/**
* 生成html
*/
function createHtml() {
var html = '';
for (var i = 0, len = level_0.length; i < len; i++) {
var checked = '';
var data = level_0[i];
if (data['checked'] == 1) {
checked = 'checked';
}
html += "<dd data-parent_id='" + data['parent_id'] + "' class='level_0 id_" + data['id'] + "'>\n" +
" <input type='checkbox' name='level[0][]' value='" + data['id'] + "' lay-skin='primary' " + checked + " />\n" +
" <span>" + data['id'] + "-" + data['name'] + "</span>\n" +
" </dd>";
}
$("#level_0").html(html);
var html = '';
for (var i = 0, len = level_1.length; i < len; i++) {
var checked = '';
var data = level_1[i];
if (data['checked'] == 1) {
checked = 'checked';
}
html += " <dd data-parent_id='" + data['parent_id'] + "' class='level_1 parent_" + data['parent_id'] + " id_" + data['id'] + "'>\n" +
" <input type='checkbox' name='level[1][]' value='" + data['id'] + "' lay-skin='primary' " + checked + " />\n" +
" <span>" + data['id'] + "-" + data['name'] + "</span>\n" +
" </dd>";
}
$("#level_1").html(html);
var html = '';
for (var i = 0, len = level_2.length; i < len; i++) {
var checked = '';
var data = level_2[i];
if (data['checked'] == 1) {
checked = 'checked';
}
html += " <dd data-parent_id='" + data['parent_id'] + "' class='level_2 parent_" + data['parent_id'] + " id_" + data['id'] + "'>\n" +
" <input type='checkbox' name='level[2][]' value='" + data['id'] + "' lay-skin='primary' " + checked + " />\n" +
" <span>" + data['id'] + "-" + data['name'] + "</span>\n" +
" </dd>";
}
$("#level_2").html(html);
}
$("#reset").click(function () {
createHtml();
layui.form.render();
})
</script>
</body>
</html>完整示例代码见附件
