本文详解如何在 datatable 表格中，当用户勾选带有 `data-sisa` 属性的复选框时，自动将对应 `sisa` 值填入同一行右侧“diterima”列的数字输入框中，并支持多选批量赋值。
在使用 DataTable 渲染动态表格时，常需实现「勾选即填充」的交互逻辑——例如本例中：每行复选框携带 data-sisa 值，勾选后需将该值写入同级行中 class="open-input" 的 元素（位于“diterima”列）。关键挑战在于精准定位目标输入框（不能全局用 #inputID，因 ID 重复会导致仅首行生效）。
✅ 正确做法：基于 DOM 结构就近查找
你的原始代码中使用 $("#inputID").val(sisa) 存在严重问题：id="inputID" 在多行中重复，违反 HTML 唯一性规范，jQuery 仅匹配第一个元素。应改用相对定位——从触发事件的复选框出发，向上找到所在
$('body').on('change', 'input[type="checkbox"].editor-active', function() {
const $checkbox = $(this);
const sisa = $checkbox.data('sisa'); // 安全读取 data-sisa
const $input = $checkbox.closest('tr').find('.open-input');
if ($input.length) {
$input.val(this.checked ? sisa : 0);
}
});? 为什么这样更可靠？
- closest('tr') 确保跨列操作严格限定在当前数据行；
- find('.open-input') 利用类名而非 ID，避免重复 ID 冲突；
- 显式判断 this.checked，支持取消勾选时清空或重置为 0；
- 事件委托绑定到 body，兼容 DataTable 动态渲染的行节点。
⚠️ 注意事项与增强建议
-
移除重复 ID：修改 DataTable 列定义，将 id="inputID" 改为 class="open-input"（你已部分做到），并删除所有 id 属性：
{"data": "id", "class": "text-center", render: function () { return ''; } } - 支持多选批量填充：上述逻辑天然支持多选——每次勾选/取消均独立触发，各行互不影响。
-
防 NaN 输入：若 sisa 可能为空或非数字，可增加校验：
const safeSisa = Number(sisa) || 0; $input.val(this.checked ? safeSisa : 0);
- 视觉反馈：可添加 disabled 或 readonly 控制，避免手动修改被覆盖（按需启用）。
通过此方案，你不仅能准确完成单行联动，还能确保表格扩展性与维护性，真正实现「所见即所得」的数据驱动交互。
