layui 实现表单、表格中复选框checkbox的全选功能

一、layui 实现表单中多选框的全选功能，代码如下：

//html页面表单
<form class="layui-form"><div class="layui-form-item" id="InfoInCardCheck"></div>
</form>

// 动态添加选项
$("#InfoInCardCheck").append(`<label class="layui-form-label">请选择：</label><input lay-skin="primary" type="checkbox" name="type" lay-            filter="allInputUpdate"  id="allInputUpdate" title="全部"/>`);
let inputCardArr = [3, 4, 5, 6, 7, 8];
for (let i = 0; i < inputCardArr.length; i++) {$("#InfoInCardCheck").append(`<input type="checkbox"     class="checkInfoInSlot" name="checkInfoInSlot" lay-filter = "inputCheckOne" lay-skin="primary" title="${inputCardArr[i]}" id="inputSlot-${inputCardArr[i]}">`);
}
form.render();//点击全选, 勾选
form.on('checkbox(allInputUpdate)', function (data) {let child = $(".checkInfoInSlot");child.each(function (index, item) {item.checked = data.elem.checked;});form.render('checkbox');
});// 全选时有一个取消选中，改为未全选
form.on('checkbox(inputCheckOne)', function (data) {let child = $(".checkInfoInSlot").length;// 复选框总数let childed = $("input[name='checkInfoInSlot']:checked").length; // 选中的复选框总数if (childed == child) {$("#allInputUpdate").prop("checked", true);} else {$("#allInputUpdate").prop("checked", false);}form.render('checkbox');
});

页面样式截图：

二、layui 实现表格中多选框的全选功能，代码如下：

<table id="devCtrlUpdateTable" lay-filter="devCtrlUpdateTable"></table>//执行一个 table 实例let ctrUpdateTable = table.render({elem: '#devCtrlUpdateTable', height: 470, cols: [[ //表头{type: 'checkbox', fixed: 'left'}// , {field: 'experience', title: '序号', width: 100, type: 'numbers'}, {field: 'slot', title: '槽位', width: 110}, {field: 'type', title: '类型', width: 110}, {field: 'version', title: '描述', width: 386}]], limit: 10, data: CtrUpdateData//数据, page: {layout: ['count', 'prev', 'page', 'next', "skip"] //自定义分页布局//,curr: 5 //设定初始在第 5 页, groups: 2//只显示 1 个连续页码, first: false //不显示首页, last: false //不显示尾页},done: function () {}})let ctrCheckArr = [];table.on('checkbox(devCtrlUpdateTable)', function(obj){ctrCheckArr.length = 0;let checkStatus = table.checkStatus('devCtrlUpdateTable'),data = checkStatus.data; //获取选中的数据// console.log(data)for (let i = 0; i < data.length; i++) {ctrCheckArr.push(data[i].slot)}console.log(ctrCheckArr);});//根据新数据可以重新加载表格ctrUpdateTable.reload({data: CtrUpdateData; });

页面样式截图：

layui 实现表单、表格中复选框checkbox的全选功能相关推荐

JQuery实现复选框CheckBox的全选、反选、提交操作
对复选框最基本的应用,就是对复选框进行全选.反选和提交等操作.复杂的操作需要与选项挂钩,来达到各种级联反应效果. [示例]使用Jquery实现复选框CheckBox的全选.反选.提交操作. (1)创建 ...
vue设置多选框默认勾选_vue中复选框怎么默认全选，至少选择4个才可以点击下一步...
[1]项目中有这样的需求,要怎么解决呢...默认复选框是全选状态,也可以取消某一个状态,至少选择4个选项才可以点击下一步.这个要怎么实现啊 html: 原料进厂模块组装成品质检仓储物流销售 ...
复选框实现。全选、全不选、多选
复选框实现全选.全不选.被选: html代码 <input type="checkbox" id="checksboxs">全选<input ...
HTML复选框--checkbox
在公司实际开发中,会经常遇到复选框全选.多选.统计选中个数的情况,所以总结研究了一些大神的帖子,汇总学习一下! 1.统计被选中复选框的个数 2.点击复选框,执行对应函数 3.获取复选框的状态 4.全选 ...
饿了么UI elementUI中的el-table勾选框设置默认勾选、禁用
最近项目中有这个一个需求:请求后端列表数据,根据数据中remark值自动设置table的勾选框的勾选状态及禁用状态, 如果remark="1",是勾选状态且该勾选框变为禁用状态:反 ...
elementUI中的el-table勾选框设置默认勾选、禁用
elementUI中的el-table勾选框设置默认勾选.禁用最近项目中有这个一个需求:请求后端列表数据,根据数据中remark值自动设置table的勾选框的勾选状态及禁用状态, 如果remark= ...
Java 表单提交下拉框_Java实现Layui的form表单动态绑定下拉框
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 Java实现Layui的form表单动态绑定下拉框 [1]视图层爱好: 立即提交重置 $(function () { //[1]加载&初始化l ...
html手机单选框,手机移动网页制作：表单输入框、单选框、复选框
手机移动网页制作:表单输入框.单选框.复选框本文继前面讲到的WML语言中的文本标签和图像.链接后,接着讲WML语言中的表单内容. 在Html中,表单内容包括输入框.单选框.复选框等等,WML也并不例 ...
Vue.js 极简小例：表单（输入框 input、文本域 textarea、单选框 radio、下拉菜单 selected、复选框 checkbox）
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 代码: <template> <div > <p>------- ...

layui 实现表单、表格中复选框checkbox的全选功能

一、layui 实现表单中多选框的全选功能，代码如下：

二、layui 实现表格中多选框的全选功能，代码如下：

layui 实现表单、表格中复选框checkbox的全选功能相关推荐

最新文章

热门文章