17370845950

本文详解如何在 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 控制，避免手动修改被覆盖（按需启用）。

通过此方案，你不仅能准确完成单行联动，还能确保表格扩展性与维护性，真正实现「所见即所得」的数据驱动交互。