使用layui做二级菜单，选父级必选子级

html中有lay-filter选择器

js中直接使用代码

layui.use(['form'], function() {
var form = layui.form;
form.on('checkbox(test)', function(data) {

if(data.elem.checked == true) {
var a = $(data.elem).closest("tr").attr("data-tt-id");
var c = $(data.elem).closest("tr").attr("data-tt-parent-id");
$('input[name="sel"]').each(function() {
var b = $(this).closest("tr").attr("data-tt-parent-id");
var d = $(this).closest("tr").attr("data-tt-id");
if(a == b) {
$(this).prop("checked", "checked");
} else if(c == d) {
$(this).prop("checked", "checked");
}
});
} else if(data.elem.checked == false) {
var a = $(data.elem).closest("tr").attr("data-tt-id");
$('input[name="sel"]:checked').each(function() {
var b = $(this).closest("tr").attr("data-tt-parent-id");
if(a == b) {
$(this).prop("checked", false);
}
});
}
layui.use(['form'], function() {
var form = layui.form;
form.render(); // 更新全部
form.render('select'); // 刷新select选择框渲染
});
});
});

以上代码可以解决layui二级菜单选父级必选子级的功能！

以下为同级的复选框全选操作代码：sel为全选的 lay-filter='sel'，列表的复选框为lay-filter='sels'

layui.use(['form'], function() {
var form = layui.form;
form.on('checkbox(sel)', function(data) {
if(data.elem.checked & data.value == "on") {
$(':checkbox[name="sels"]').attr("checked", true);
$(':checkbox[name="sels"]').addClass("layui-form-checked");
} else if(!data.elem.checked & data.value == "on") {
$(':checkbox[name="sels"]').attr("checked", false);
$(':checkbox[name="sels"]').removeClass("layui-form-checked");
}
layui.use(['form', 'element'], function() {
var form = layui.form;
form.render()
});
});

});

经过研究，以下是三级目录的选择：

layui.use(['form'], function() {
var form = layui.form;
form.on('checkbox(box)', function(data) {
if(data.elem.checked == true) {
var a = $(data.elem).closest("tr").attr("data-tt-id");
var c = $(data.elem).closest("tr").attr("data-tt-parent-id");
$('input[name="box"]').each(function() {
var b = $(this).closest("tr").attr("data-tt-parent-id");
var d = $(this).closest("tr").attr("data-tt-id");

if(a == b) {
$(this).prop("checked", "checked");
$('input[name="box"]').each(function() {
var e = $(this).closest("tr").attr("data-tt-parent-id");
var f = $(this).closest("tr").attr("data-tt-id");
if(d == e) {
$(this).prop("checked", "checked");
}
});

} else if(c == d) {
$(this).prop("checked", "checked");
$('input[name="box"]').each(function() {
var e = $(this).closest("tr").attr("data-tt-parent-id");
var f = $(this).closest("tr").attr("data-tt-id");
if(e == a) {
$(this).prop("checked", "checked");
}else if( b == f ){
$(this).prop("checked", "checked");
}
});

}
});
} else if(data.elem.checked == false) {
var a = $(data.elem).closest("tr").attr("data-tt-id");
$('input[name="box"]:checked').each(function() {
var b = $(this).closest("tr").attr("data-tt-parent-id");
var d = $(this).closest("tr").attr("data-tt-id");
if(a == b) {
$(this).prop("checked", false);
$('input[name="box"]').each(function() {
var e = $(this).closest("tr").attr("data-tt-parent-id");
var f = $(this).closest("tr").attr("data-tt-id");
if(d == e) {
$(this).prop("checked", false);
}
});
}
});
}
layui.use(['form'], function() {
var form = layui.form;
form.render(); // 更新全部
form.render('select'); // 刷新select选择框渲染
});
});

});

以下是复选框单选的代码：

$(function() {
layui.use(['form'], function() {
var form = layui.form;
form.on('checkbox(selsRight)', function(data) {
if(data.elem.checked == true) {
$(':checkbox[name="selRight"]').attr("checked", false);
$(':checkbox[name="selRight"]').removeClass("layui-form-checked");
$(this).prop("checked", true);
}
layui.use(['form', 'element'], function() {
var form = layui.form;
form.render()
});
});
});
})

使用layui做二级菜单，选父级必选子级相关推荐

element tree 父级勾选子级也勾选,子级勾选默认父级也勾选, 子级取消勾选不影响父级勾选(前端)
在做菜单和菜单按钮权限配置这块,用element-UI中的tree组件来做.想选中单个页面,或者单个页面的某个具体按钮,就能把所有上级的父级菜单也勾选上,而且取消菜单按钮的时候还不影响父级菜单的勾选. ...
css二级菜单会然下面遮住_JavaScript实现下拉二级菜单详解
下拉菜单最终效果如图: 实现原理,通过绝对定位的方式,使下拉列表脱离文档流.通过js或者css来控制鼠标移入后的效果初始时可以改变 1.display:none;使其隐藏 2.height:0px; ...
二级菜单HTML原理,CSS多级菜单的实例代码讲解
这是一个相当炫的功能,让网页看起来像桌面程序,如window的开始菜单.实现原理基本和纯CSS相册差不多,但要注意的事项比较多,让我们一步步来吧. 先来一个非常简单的一级菜单与悬停效果. 菜单一菜单 ...
有关二级菜单缓慢效果出现（transition）
在做二级菜单显示与不显示之间,我一开始用的是默认display:none,然后想着在js里设置单击事件,变为display:block: HTML: <section><img sr ...
Vue3 + Element Plus 实现动态二级菜单
一.数据库中创建菜单表注意核心是 parent_menu_id记录了父菜单的 id. 插入一些数据: id name chinese_name parent_menu_id menu_status ...
3dsmax 选不中export，无法导出，选不中二级菜单
3dsmax 选不中export,无法导出,选不中二级菜单鼠标根本无法移动到export / 选不中二级菜单官方的补丁包可以解决你的问题:解压后打开(3dsMax2018.2_Update.msp ...
html、css 实现二级菜单
本文中,一级菜单我设计了五个元素(然后给第四个元素设计了二级菜单) html: <nav><ul class="topnav clearfix"><l ...
axure学习帖-中继器二级菜单
之前制作的二级菜单,使用的是动态面板,制作起来比较复杂(可能是因为我方法不得当),最终呈现效果如下所示: 虽然实现了菜单的功能,但是非常不利于后期的维护.后来得知二级菜单可以使用中继器来完成,于是在网 ...
python制作二级菜单_python之tkinter使用-二级菜单
# 菜单功能说明:二级菜单 import tkinter as tk from tkinter import messagebox root = tk.Tk() root.title('菜单选择') ...

使用layui做二级菜单，选父级必选子级

使用layui做二级菜单，选父级必选子级相关推荐

最新文章

热门文章