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

html中有lay-filter选择器

<th><input type="checkbox"  name="sel" lay-skin="primary"lay-filter="test" value="{{d[i][0]}}" />

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做二级菜单，选父级必选子级的全部内容，希望文章能够帮你解决使用layui做二级菜单，选父级必选子级所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。