layui table 点击行选中checkbox

最新推荐文章于 2024-05-22 16:42:57 发布
最新推荐文章于 2024-05-22 16:42:57 发布
阅读量1.4k 收藏
点赞数 1
分类专栏： JavaScript layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38404507/article/details/107611988
版权 
            table.on('row(LAY-menu-drillcrew-contacts)', function (obj) {
                if (obj.tr.find('.layui-form-checkbox').hasClass('layui-form-checked'))
                    obj.tr.find('.layui-form-checkbox').removeClass('layui-form-checked');
                else
                    obj.tr.find('.layui-form-checkbox').addClass('layui-form-checked');
            });
Alex要努力
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
关于在layui中的table checkbox 默认选中设置
weixin_33962923的博客
01-04 1717
一、layui版本 　　layui-v2.4.5 二、设置table的checkbox默认选中 总共有两种方法： 　方法1：在返回的json中设置LAY_CHECKED为true，页面上的checkbox就是选中状态了。 1 data":[ 2 {"name":"北京市","areaType":"省/直辖市","id":"110000","LAY_CHECKED":true...
Layui Table点击行时选中复选框 checkbox --- jquery
HILL_9的博客
07-06 476
$(document).on("click", ".layui-table-body table.layui-table tbody tr", function () { var index = $(this).attr('data-index'); var tableBox = $(this).parents('.layui-table-box'); //判断存在固定列 if (tableBox.find(".layui-table-fixed.layui-table-fi
LaiUI table 选中tr勾选checkbox
weixin_41141130的博客
03-20 180
//单击行勾选checkbox事件 $(document).on("click",".layui-table-body table.layui-table tbody tr", function () { var index = $(this).attr('data-index'); var tableBox = $(this).parents('.layui-table-box'...
LayUI 的table插件，可以多选行，点击行数据时，如果行是选中状态，则取消选中；如果行数据是未选中状态，则选中筛选框
最新发布
LYBWWP
05-22 160
【代码】LayUI 的table插件，可以多选行，点击行数据时，如果行是选中状态，则取消选中；如果行数据是未选中状态，则选中筛选框。
layui框架table表格实现单击行选中checkbox功能
绝对零度的博客
07-05 1785
layui.table.on('row(operateEvent)', function (obj) { var tableDiv; var index = $(obj.tr.selector).attr('data-index'); var tableBox = $(obj.tr.selector).parents('.layui-table-box'); //存在...
layui的table单击行勾选checkbox功能方法
01-19
如下所示： //单击行勾选checkbox事件 $[removed](click,.layui-table-body table.layui-table tbody tr, function () { var index = $(this).attr('data-index'); var tableBox = $(this).parents('.layui-table-box'); //存在固定列 if (tableBox.find(.layui-table-fixed.layui-table-fixed-l).length>0) { tableDiv = t
layUI 选中表格 checkbox
我的博客
11-15 835
layui.use('table', function(){ var table = layui.table; //监听表格复选框选择 table.on('checkbox(demo)', function(obj){ console.log(obj) }); //监听工具条 table.on('tool(demo)', function(obj){ var data = obj.data; if(obj.event === 'detail'){ l
layui默认选中table的CheckBox复选框方法
10-16
在本文中，我们将深入探讨如何在layui框架中实现默认选中table的CheckBox复选框。layui是一款流行的前端组件库，提供了丰富的UI组件，包括表格（table）和复选框（CheckBox）。在数据展示或者数据操作的场景中，我们...
Layui Table js 模拟选中checkbox的例子
10-16
今天小编就为大家分享一篇Layui Table js 模拟选中checkbox的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui的table checkbox 默认选中设置
qq_35976548的博客
02-22 5449
最近工作遇到一个需求，需要给带checkbox的表格数据设置默认选中。我在网上看到许多种解答方法，比较杂乱，也不是全都好使，所以记录一下。 第一种：在后台的data数据中设置好checked值 1.返回数据格式如下： { "code": 0, "msg": "", "count": 2, "data": [{ "rolename": "系统管理员", "roleid": "1", "checked": true //重点 }, { "rolename": "普通员工", "ro
layui复选框的全选与取消实现方法
10-16
今天小编就为大家分享一篇layui复选框的全选与取消实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui table 复选框跳页后再回来保持原来选中的状态demo
04-13
layui table 复选框跳页后再回来保持原来选中的状态相关的源码
layui数据表格复选框设置选中
withwindluo的博客
04-23 2365
$.each(res.data, function (i, obj) { for(var j=0; j < chosenData.length ; j++){ if (obj.id == chosenData[j].id) { $("input[type='checkbox'][name='layTableCheckbox']").prop('checked', true); $('tr[data-index=' + obj.LA
layui之 table中checkbox复选框，跨页保存选中赋值状态
qq_39835505的博客
12-28 4463
参考链接 https://blog.csdn.net/HuperSan/article/details/99896878 https://blog.csdn.net/weixin_43821151/article/details/103807037 1 核心就是声明全局变量用来缓存checkbox的操作。 var quanju = new Array();//全局 var huancun = new Array();//缓存 2 并且在分页的done属性中编写函数，让它每次重载分页时根据全局变量对ch
layui table 单击行选中复选框
闪耀星星的窝
07-12 1791
layui table 单击行选中复选框
layui点击行选中checkbox效果
baidu_37313657的博客
07-25 1002
layui 行事件
layui table 修改为双击编辑
new_zp的博客
05-14 6487
点开layui目录，编辑table.js文件，搜索i.data("edit")； a.layBody.on("click","td",function(e){var i=t(this),a=(i.data("field"),i.data("edit")) 可以看到这段代码，把click修改为dblclick便可实现双击修改 如果引起什么连带效果可以留言一下^-^ ...
layui--table checkbox 默认选中
Schaffer的博客
08-10 3830
注意： 后台反馈回来的checked包装格式不要将true或false包装成字符串哦，layui处理会有问题。
layui table行点击tr_layui的点击table行选中复选框
06-03
要实现行点击选中复选框的效果，可以通过以下步骤来实现： 1. 在表头中添加一个全选的复选框，并为其设置一个ID。 2. 在每一行的第一列中添加一个复选框，并为其设置一个class，例如“check-box”。 3. 给表格绑定一个点击事件，在点击事件中判断点击的元素是否为复选框或者全选的复选框，如果是，则执行对应的操作。 4. 当点击某一行时，获取该行的复选框元素，并设置其选中状态为true。 下面是一个示例代码： ```html <table class="layui-table" id="myTable"> <thead> <tr> <th><input type="checkbox" name="" lay-skin="primary" id="checkAll"></th> <th>列1</th> <th>列2</th> <th>列3</th> </tr> </thead> <tbody> <tr class="tr_layui"> <td><input type="checkbox" name="" lay-skin="primary" class="check-box"></td> <td>行1列1</td> <td>行1列2</td> <td>行1列3</td> </tr> <tr class="tr_layui"> <td><input type="checkbox" name="" lay-skin="primary" class="check-box"></td> <td>行2列1</td> <td>行2列2</td> <td>行2列3</td> </tr> </tbody> </table> <script> // 全选复选框的点击事件 $('#checkAll').on('click', function() { if ($(this).is(':checked')) { $('.check-box').prop('checked', true); } else { $('.check-box').prop('checked', false); } }); // 行点击事件 $('.tr_layui').on('click', function() { // 判断是否为复选框或者全选复选框 if ($(event.target).is(':checkbox')) { return; } // 获取该行的复选框元素 var checkBox = $(this).find('.check-box'); // 判断该复选框是否已选中 if (checkBox.is(':checked')) { checkBox.prop('checked', false); } else { checkBox.prop('checked', true); } }); </script> ``` 在这段代码中，我们首先给表头添加一个ID为“checkAll”的全选复选框，然后在每一行的第一列中添加class为“check-box”的复选框。接着，我们给全选复选框和每行绑定点击事件，在事件中判断点击的元素是否为复选框或者全选复选框，然后执行对应的操作。当点击某一行时，我们获取该行的复选框元素，并设置其选中状态。这样，就可以实现行点击选中复选框的效果了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值