应监听 .layui-form-checkbox 的 click 事件或使用 form.on('checkbox')，通过 data.elem.closest('tr') 获取行元素，用 classList.toggle() 切换 class 控制背景色，避免直接操作 style.backgroundColor。
点击 checkbox 时如何用原生 JS 改变所在 <tr> 背景色
<p>直接绑定 <code>change 事件到 checkbox 上，通过 closest('tr') 找到最近的行元素，再用 style.backgroundcolor 或 class 切换来控制背景。layui 的 checkbox 默认会包裹一层自定义结构（<div class="layui-form-checkbox">），所以不能直接对原始 <code><input type="checkbox"> 绑定——得监听它的父容器或使用事件委托。
常见错误是：给 layui-form-checkbox 直接加 click 事件后，反复点击却没触发；或者用了 document.querySelectorAll('input[type=checkbox]') 但没等 Layui 渲染完就执行，导致查不到元素。
- 确保操作在
form.render()之后，或放在layui.use(['form'], callback)内部 - 推荐监听
.layui-form-checkbox的 click 事件，再反查对应input的checked状态 - 用
classList.toggle()控制 class 比直接改style.backgroundColor更利于维护和复用
Layui form.on('checkbox') 回调里怎么拿到当前行 DOM
form.on('checkbox(filterName)') 的回调参数 data.elem 是原始 checkbox 元素，但它在 Layui 渲染后被隐藏了，视觉上不可见。你可以用它向上找父级 <tr>，但要注意层级：Layui 的 checkbox 通常嵌套在 <code><td> → <code><div class="layui-form-checkbox"> → <code><input type="checkbox">，所以 data.elem.closest('tr') 是可行的。
如果表格用了 lay-data 或自定义属性，也可以顺便取值做联动：
form.on('checkbox(rowSelect)', function(data){
var $tr = $(data.elem).closest('tr');
if(data.elem.checked){
$tr.addClass('layui-bg-gray');
} else {
$tr.removeClass('layui-bg-gray');
}
});
- 必须给 checkbox 设置
lay-skin="primary"（默认皮肤）且带name和lay-filter，否则form.on不生效 - 若 checkbox 在动态生成的行中（如 table.reload 后），需在重载完成后重新绑定，或统一用事件委托
- 避免在回调里直接写
$tr.css('background', '#f0f0f0')—— 会覆盖 CSS 优先级，且不利于主题切换
为什么用 class 切换比内联 style 更可靠
因为 Layui 的样式表里有大量 !important 规则（比如 .layui-table-hover），直接写 style.backgroundColor 很容易被覆盖；而自定义 class 只要权重足够（如加 .layui-table tbody tr.selected），就能稳定生效。
另外，当用户 hover 行、选中多行、或启用隔行变色时，内联 style 会和这些状态冲突，class 方式可通过 CSS 优先级和 :hover 伪类自然协同。
- 在 CSS 中定义：
.layui-table tbody tr.selected { background-color: #eef7ff !important; } - 注意加
!important，否则可能被.layui-table-hover覆盖 - 如果用了 Layui 的
row-style回调函数，也要同步判断checked状态来返回不同 style 对象
input，先确认 form.render() 已执行，再用 closest('tr') 安全取行节点。
