如何实现点击复选框将同行输入值赋值给下方所有行输入框？

嘿，我来帮你搞定这个问题！你需要的是点击某行的复选框时，把该行输入框的值同步到下方所有行的输入框中，同时完全不影响上方行的内容。下面我给你一个简单可靠的实现方案，不管你的表格是静态还是从数据库动态生成的都能生效：

1. 先整理你的HTML结构 #

首先给表格和行、输入框、复选框加上统一的类名，方便JS定位元素：

<table id="data-table">
  <thead>
    <tr>
      <th>输入值</th>
      <th>同步到下方</th>
    </tr>
  </thead>
  <tbody>
    <!-- 这里是从数据库动态生成的行，示例如下 -->
    <tr class="data-row">
      <td><input type="text" class="row-input" placeholder="输入值"></td>
      <td><input type="checkbox" class="sync-checkbox"></td>
    </tr>
    <tr class="data-row">
      <td><input type="text" class="row-input" placeholder="输入值"></td>
      <td><input type="checkbox" class="sync-checkbox"></td>
    </tr>
    <tr class="data-row">
      <td><input type="text" class="row-input" placeholder="输入值"></td>
      <td><input type="checkbox" class="sync-checkbox"></td>
    </tr>
  </tbody>
</table>

2. 原生JavaScript实现逻辑 #

用事件委托来处理动态生成的行（避免新添加的行无法触发事件），核心逻辑是找到当前点击的复选框所在行，然后遍历它下方的所有行同步值：

// 获取表格元素
const table = document.getElementById('data-table');

// 给表格添加点击事件监听（事件委托）
table.addEventListener('click', function(e) {
  // 判断点击的是同步复选框
  if (e.target.classList.contains('sync-checkbox')) {
    // 获取当前复选框所在的行
    const currentRow = e.target.closest('.data-row');
    if (!currentRow) return;
    
    // 获取当前行输入框的值
    const currentInputValue = currentRow.querySelector('.row-input').value;
    if (!currentInputValue) {
      alert('请先输入值再点击同步哦！');
      e.target.checked = false; // 清空勾选状态
      return;
    }

    // 遍历当前行下方的所有行
    let nextRow = currentRow.nextElementSibling;
    while (nextRow) {
      // 确保是数据行（避免表头或其他行）
      if (nextRow.classList.contains('data-row')) {
        // 赋值给下方行的输入框
        nextRow.querySelector('.row-input').value = currentInputValue;
      }
      // 移动到下一行
      nextRow = nextRow.nextElementSibling;
    }

    // 可选：如果只需要勾选时同步，取消勾选时清空下方值，可以加这段
    // if (!e.target.checked) {
    //   let nextRow = currentRow.nextElementSibling;
    //   while (nextRow) {
    //     if (nextRow.classList.contains('data-row')) {
    //       nextRow.querySelector('.row-input').value = '';
    //     }
    //     nextRow = nextRow.nextElementSibling;
    //   }
    // }
  }
});

3. 为什么之前的代码只在第一行生效？ #

大概率是你之前的代码没有正确定位“当前行下方的所有行”，比如直接选中了表格里所有的输入框，然后从索引1开始赋值——这种写法只有第一行点击时能覆盖下方所有行，但第二行点击时，还是会从索引1开始（也就是覆盖第二行及之前的行），就会出现不符合预期的情况。

而上面的代码是从当前行的下一行开始，逐个遍历到表格末尾，完美解决了这个问题。

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