17370845950

本文讲解如何在使用 datatables 的表格中，当用户勾选带有 `data-sisa` 属性的复选框时，自动将对应 `sisa` 值填入同一行右侧“diterima”列中的 `` 表单字段，并支持多选批量赋值。

在当前实现中，复选框与目标输入框位于同一行但不同列，且 id="inputID" 被重复用于多个行 —— 这违反 HTML 唯一性规范，会导致 $("#inputID").val(sisa) 仅作用于第一个匹配元素，无法精准控制每行数据。

✅ 正确做法是：利用 DOM 层级关系定位当前复选框所在行（tr），再查找该行内特定列的输入框。以下是优化后的完整解决方案：

✅ 推荐 jQuery 实现（支持单选/多选）

$('body').on('change', 'input[type="checkbox"].editor-active', function() {
    const $checkbox = $(this);
    const sisa = $checkbox.data('sisa'); // 获取当前行的 sisa 值
    const $row = $checkbox.closest('tr'); // 定位所在行

    // 查找本行中 "diterima" 列的 input（假设它在倒数第二列，或通过 class 精准定位）
    const $input = $row.find('input.open-input[type="number"]');

    if ($input.length) {
        $input.val(this.checked ? sisa : 0);
    }
});

? DataTable 列定义优化建议（提升可维护性）

为避免依赖列序或重复 ID，建议为“diterima”列的输入框添加行唯一标识或语义化 class，例如：

{
    "data": "id",
    "class": "text-center",
    render: function (data, type, row) {
        return ``;
    }
}

这样后续也可通过 data-row-id 进行跨组件关联，增强健壮性。

⚠️ 注意事项

• ❌ 禁止在循环渲染中使用相同 id（如 id="inputID"）—— 浏览器只识别首个，jQuery 选择器会失效；
• ✅ 使用 class 或 data-* 属性 + closest('tr') + find() 是最可靠、可扩展的定位方式；
• ? 若需「取消勾选时清空」而非置 0，可将 0 改为 ''（空字符串）；
• ? 如需提交时收集所有已填写值，可通过 table.rows().every(...) 遍历并提取 $('.diterima-input').map(...).get()。

此方案兼顾简洁性与工程实践，适用于动态渲染的 DataTable，确保多选场景下每行数据精准绑定，无副作用。