使用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()
});
});
});
})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值
>