如何通过JavaScript oninput事件实现修改表格行输入时勾选行内复选框

你的代码无法运行是两个明确的错误：

• 违反HTML id唯一性规则：同一页面中id不能重复，你给所有行的复选框都设置了id="modcheck"，document.getElementById只会匹配到页面第一个复选框，永远无法定位到当前修改行对应的勾选框。
• JavaScript调用语法错误：代码里写的.modifed(i)不是DOM原生提供的方法，属于无效调用，浏览器执行到这行就会抛出错误，中断后续逻辑。

最稳妥的定位方式不需要依赖id、行号索引，直接从触发修改的输入框节点向上查找所属的表格行，再在当前行范围内查找对应的复选框即可，哪怕后续调整表格列顺序、新增行都不会失效。

1. 先把所有复选框上重复的id="modcheck"属性删掉，避免id冲突。
2. 替换原有的mod函数为以下代码：

function mod(r) {
  // 定位当前输入框所在的表格行
  const currentRow = r.closest('tr');
  // 查找当前行内的修改标记复选框
  const modifyCheckbox = currentRow.querySelector('input[name="modify[]"]');
  // 自动勾选复选框
  modifyCheckbox.checked = true;
}

如果你的表格行数很多、输入框量级大，不建议给每个输入框手动加oninput绑定，用事件委托只需要给表格绑定一次事件，性能更好、后续维护更方便，新增行不需要额外加绑定代码：

// 页面加载完成后绑定一次事件即可
document.addEventListener('DOMContentLoaded', function() {
  const table = document.getElementById('table');
  table.addEventListener('input', function(e) {
    // 过滤非输入框、复选框的触发源
    const target = e.target;
    if (target.tagName !== 'INPUT' || target.type === 'checkbox') return;
    // 定位行、勾选复选框
    const currentRow = target.closest('tr');
    currentRow.querySelector('input[name="modify[]"]').checked = true;
  })
})

用这个方案的话，你可以把所有input标签上的oninput="mod(this)"属性全部删掉，代码更简洁。

内容的提问来源于stack exchange，提问作者Shane S