本文讲解如何在使用 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 `<input type="number"
class="diterima-input form-control bg-white"
value="0"
data-row-id="${row.id}">`;
}
}这样后续也可通过 data-row-id 进行跨组件关联，增强健壮性。
⚠️ 注意事项
- ❌ 禁止在循环渲染中使用相同 id（如 id="inputID"）—— 浏览器只识别首个，jQuery 选择器会失效；
- ✅ 使用 class 或 data-* 属性 + closest('tr') + find() 是最可靠、可扩展的定位方式；
- ? 若需「取消勾选时清空」而非置 0，可将 0 改为 ''（空字符串）；
- ? 如需提交时收集所有已填写值，可通过 table.rows().every(...) 遍历并提取 $('.diterima-input').map(...).get()。
此方案兼顾简洁性与工程实践，适用于动态渲染的 DataTable，确保多选场景下每行数据精准绑定，无副作用。
