layui点击行选中checkbox效果

最新推荐文章于 2025-04-16 13:26:48 发布
最新推荐文章于 2025-04-16 13:26:48 发布
阅读量1.3k 收藏
点赞数
文章标签： layui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_37313657/article/details/131917403
版权

行点击事件

table.on(‘row(ytXxTable)’, function(obj){
var isXz = $(this).find(“input:checkbox”).is(‘:checked’);
if(isXz){
obj.setRowChecked(false);
}else {
obj.setRowChecked(true);
}
// layui.form.render(“checkbox”);
});

Layui Table点击行时选中复选框 checkbox --- jquery
HILL_9的博客
07-06 539
$(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
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的table单击行勾选checkbox功能
热门推荐
damosk的博客
03-19 2万+
//单击行勾选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插件，行点击切换选中状态
最新发布
qq_35238125的博客
04-16 142
Layui table 点击行数据时，如果行是选中状态，则取消选中；如果行数据是未选中状态，则选中复选框。
layui 监听多选框（checkbox） 点击事件
迪奥乔斯达的博客
07-30 6818
//html代码 <input lay-filter="switchTest" type="checkbox" name="type[]" value="1" title="葡萄"> <input lay-filter="switchTest" type="checkbox" name="type[]" value="2" title="榴莲"> . . //js代码 layui.use(['form', 'layer', 'jquery' ], function () { $
【Layui】------ Layui Table 点击行选中示例代码
皮皮冰要做大神
01-11 6410
layui table 点击行选中实例 //单击行勾选checkbox事件 $(document).on("click", ".layui-table-body table.layui-table tbody tr", function () { var index = $(this).attr('data-index'); var tab...
layui默认选中table的CheckBox复选框方法
10-16
在本文中，我们将深入探讨如何在layui框架中实现默认选中table的CheckBox复选框。layui是一款流行的前端组件库，提供了丰富的UI组件，包括表格（table）和复选框（CheckBox）。在数据展示或者数据操作的场景中，我们...
layui checkbox默认选中,获取选中值,清空所有选中项的例子
10-16
在用户完成选择后，我们可以遍历所有`MenuArr`组内的选中checkbox，收集它们的值。上面的代码片段已经展示了如何获取选中值，使用了`$(":checkbox[name='MenuArr']:checked")`选择器： ```javascript var checkbox...
layui之table checkbox初始化时选中对应选项的方法
10-16
在开发Web应用时，layui是一款常用的前端框架，它提供了丰富的组件和API，使得开发者能够方便地构建用户界面。其中，layui的table组件是用于展示数据表格的...遵循这些步骤，你就能轻松实现checkbox的初始化选中效果。
layui checkbox选中
https://ligo100.cn 小何博客欢迎访问。
09-01 1771
文章目录[隐藏] 前言方法栗子 layui checkbox 选中问题 前言 layui要如何选中呢？在我们使用layui过程中，经常会遇到动态增加 checkbox 的情况，今天我便遇到了，但是在获取 checkbox 选中状态时，始终不对，最后找到方法了，原来是我方法用错了。 方法 获取 checked 属性，用 attr，设置 checked 属性时用 prop 还有就是在动态渲染 c...
layui table 单击行选中复选框
闪耀星星的窝
07-12 1881
layui table 单击行选中复选框
layui监听复选框checkbox选中，分页选中处理
hexu_blog的博客
12-21 2725
这三个地方的代码直接复制去用就行了。中对复选框选中或取消的状态定义）最终选中的数据id为：ids。
Layui-Table单击勾选此行checkbox
Coder_moment的博客
05-06 765
$(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 checkbox 默认选中
Schaffer的博客
08-10 5000
注意： 后台反馈回来的checked包装格式不要将true或false包装成字符串哦，layui处理会有问题。
layui复选框checkbox点击事件,3中取值方法和赋值方法
u013931283的博客
03-02 420
详细参考该篇文章: http://www.shagua.wiki/project/3?p=94
layui框架table表格实现单击行选中checkbox功能
绝对零度的博客
07-05 1848
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---输入事件
qq_57620101的博客
07-25 2431
【代码】Layui---输入事件。
html中自动选中行,Layui中使用table组件时让某些行的checkbox自动选中
weixin_40362806的博客
11-23 1003
在使用layui框架时，数据表格是经常使用的一个组件，一般在表格的左侧会有checkbox可以用来勾选当前行的数据，但是checkbox一般是由用户自己手动勾选的，那遇到需要自动勾选的情况怎么办呢？如果使用dom操作来控制checkbox选中是没有问题的，但是在使用layui的api方法时会获取不到此条被选中的数据，解决该问题的方法有两个。修改数据方法在表格的json数据中设置。
layui 选中checkbox
02-20
### 实现Layui中默认选中或手动选中Checkbox #### 使用`data`参数配置默认选中状态 在初始化表格时，可以通过设置数据源中的特定字段来控制复选框的状态。如果返回的数据结构允许，在每条记录中加入`checked`键并赋值为布尔类型，则可以轻松实现这一功能[^4]。 ```javascript var tableData = [ {"name": "北京市", "areaType": "省/直辖市", "id": "110000", "checked": true}, {"name": "市辖区", "areaType": "地市", "id": "110100", "checked": false} ]; ``` #### 动态调整已加载页面上的复选框状态 对于已经渲染完成的表格，想要动态改变某些行的选择情况，可利用`checkFunction()`函数配合分页操作或其他触发条件来进行处理。此方式适用于需要根据业务逻辑实时更新哪些项应该被选中的场景[^1]。 ```javascript function checkFunction(data){ var result; switch(data.index){ case 0 : // 第一行禁用 $(this).find('input[type=checkbox]').prop('disabled', true); break; case 1 : // 第二行列选中 result = true; break; default : result = false; // 其他行不选中 } return result; } // 初始化表格时指定该回调 table.render({ ... done: function(res, curr, count){ setTimeout(function(){ layui.table.checkSome('yourTableId', checkFunction); }, 100); }, ... }); ``` #### 响应用户交互事件自动选中 除了上述两种静态设定外，还可以监听用户的动作（如点击某一行），并通过编程手段让相应的单选按钮处于选定状态。这通常涉及到DOM操作以及样式类名的变化[^3]。 ```javascript layui.use(['table'], function(){ var table = layui.table; table.on('row(yourFilterName)', function(obj){ obj.tr.find('td div.layui-unselect input').get(0).checked = 'checked'; // 更新视觉效果 obj.update({ checked: true }); }); }); ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值