微客导航 » 文章资讯 » layui结合form,table的全选、反选v1.0示例讲解

layui结合form,table的全选、反选v1.0示例讲解

2023-09-09 00:54:04 296

1、需要引入layui.css和layui.js

2、html代码如下：








ID
角色名
唯一标识
状态
操作







1
xxx
xxx
xxx
xxx

3、js代码如下：

form.on('checkbox(allChoose)',function(data){
varchild=$(data.elem).parents('table').find('tbodyinput[type="checkbox"]');
child.each(function(index,item){
item.checked=data.elem.checked;
});
form.render('checkbox');
});
form.on('checkbox(itemChoose)',function(data){
varsib=$(data.elem).parents('table').find('tbodyinput[type="checkbox"]:checked').length;
vartotal=$(data.elem).parents('table').find('tbodyinput[type="checkbox"]').length;
if(sib==total){
$(data.elem).parents('table').find('theadinput[type="checkbox"]').prop("checked",true);
form.render();
}else{
$(data.elem).parents('table').find('theadinput[type="checkbox"]').prop("checked",false);
form.render();
}
});

第一段是全选和反选的功能，第二个是选单个的时候的效果，如果每个单独勾选，当全部选中时，总选开关会自动勾选，反之，如果没有全部选择，总选开关会自动取消选择。

以上这篇layui结合form,table的全选、反选v1.0示例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

layui结合form,table的全选、反选v1.0示例讲解

热门推荐

随机推荐