应使用事件委托监听表格容器的change事件，选择器为input[name="layTableRadio"]；通过tr.data('index')从table.cache获取当前行数据；跨页需手动维护选中状态并调用form.render()更新UI。
layui table 行单选框怎么绑定 change 事件
不能直接给 checkbox 绑定原生 change，因为 layui 表格的单选框是动态渲染的，且被封装成 lay-table-radio 类型的自定义样式控件，dom 上实际是隐藏的原生 input[type="radio"] + 伪元素模拟。
正确做法是监听表格容器的 change 事件，并用事件委托捕获目标：
- 确保表格容器有唯一 ID（如
id="userTable"），这是事件委托的基础 - 在
table.render()完成后，用$(#userTable).on('change', 'input[name="layTableRadio"]', ...) - 注意 name 值：Layui 单选列默认生成的 radio name 是
layTableRadio，不是你配置的field名
为什么用 on('change') 而不是 click
click 容易误触发（比如点到文字、边框但没真正切换状态），change 才代表真实选中状态变更。Layui 的 radio 切换会真实触发原生 change 事件，只是它被包裹了。
常见错误现象：
– 监听 click 后，点同一行两次就触发两次（其实没变）
– 监听了但没生效，是因为没加事件委托或选择器写错
- 必须用事件委托：表格重载、分页、搜索后 DOM 会重建，直接
$('input').on('change')会失效 - 不要写
input[type="radio"]—— Layui 会把 type 改成hidden来禁用原生行为，真正可监听的是未隐藏前的初始结构，name 才是稳定标识 - 如果自定义了
radio的name（通过lay-key或改源码），要按实际 name 写，否则捕获不到
获取当前选中行的数据对象
Layui 不提供“当前 radio 对应哪一行”的直接 API，得靠 DOM 关系反查：从触发的 input 元素往上找最近的 tr，再用 table.cache 查数据。
$('#userTable').on('change', 'input[name="layTableRadio"]', function() {
const tr = $(this).closest('tr');
const index = tr.data('index'); // layUI 表格行自带 data-index
const cache = table.cache['userTable']; // 'userTable' 是你 render 时传的 id
const rowData = cache[index];
console.log(rowData);
});
-
data-index是 Layui 渲染时自动加在tr上的，稳定可用 - 别用
tr.index()或tr.children().index()—— 表头、合并单元格、固定列都会干扰序号 -
table.cache是实时数据缓存，比table.config.data更准（后者可能还是原始请求数据）
多页/搜索后选中状态丢失怎么办
单选框本身不保存状态，翻页或搜索后所有 radio 都会重置。如果你需要“记住上次选中”，得自己维护一个变量，并在每次表格重载后手动还原。
- 定义全局变量如
let lastSelectedId = null，在 change 回调里更新它 - 在
table.on('render', ...)或done回调中，遍历当前页缓存，找到匹配lastSelectedId的行，然后手动设置对应 radio 的checked属性并触发change - 注意：不能只设
checked=true，还要调用form.render('radio')让 Layui 更新 UI 样式 - 这个逻辑容易漏掉
form.render()，结果 DOM 看起来没选中，虽然属性是对的
最麻烦的其实是跨页保持单选语义 —— Layui 本身不支持，得靠业务层兜底。这点很容易被忽略，直到测试时发现翻页后“选中态”没了才返工。
