多复选框关联输入框与下拉框：实现选中值联动存储与移除

核心思路 #

要把每行的三个控件绑定关联，关键是让同一行的控件处于同一个父容器内，这样就能通过复选框快速定位到同行的输入框和下拉框，再根据复选框的选中状态来更新目标数组。

具体实现步骤 #

1. 调整HTML结构（给每行加容器） #

先给每行控件套一个容器，确保同一行的三个控件都在这个容器里，方便后续查找：

<div class="row-container">
  <input type="checkbox" class="messageCheckbox">
  <input type="text" class="nameInput" placeholder="输入名称">
  <select class="numberSelect">
    <option value="1">1</option>
    <option value="2">2</option>
    <!-- 依次添加到option 10 -->
    <option value="10">10</option>
  </select>
</div>
<div class="row-container">
  <input type="checkbox" class="messageCheckbox">
  <input type="text" class="nameInput" placeholder="输入名称">
  <select class="numberSelect">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="10">10</option>
  </select>
</div>
<!-- 更多行按此结构复制 -->

2. 编写JavaScript逻辑 #

初始化空数组存储选中数据，给所有复选框绑定change事件，处理选中/取消选中的逻辑：

// 初始化存储选中数据的数组
const selectedData = [];

// 获取所有复选框元素
const checkboxes = document.querySelectorAll('.messageCheckbox');

// 给每个复选框绑定状态变化事件
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    // 找到当前复选框所在的行容器
    const row = this.closest('.row-container');
    // 获取同行的名称输入框和下拉框值
    const name = row.querySelector('.nameInput').value.trim();
    const number = row.querySelector('.numberSelect').value;

    if (this.checked) {
      // 选中时，将数据包装成对象加入数组
      selectedData.push({ name, number: Number(number) });
    } else {
      // 取消选中时，从数组中移除对应对象
      const targetIndex = selectedData.findIndex(item => item.name === name && item.number === Number(number));
      if (targetIndex !== -1) {
        selectedData.splice(targetIndex, 1);
      }
    }

    // 可打印查看当前数组状态
    console.log(selectedData);
  });
});

3. 补充说明 #

• 用closest('.row-container')能快速定位到当前复选框的父行容器，比遍历DOM更高效。
• 如果存在名称重复的情况，建议给每行容器加唯一data-id属性，通过ID来匹配删除，避免误删同名数据。

最终效果示例 #

当选中3个复选框，对应名称为BOB、SARAH、LILY，下拉值分别为2、5、5时，数组内容为：

[{ name: 'BOB', number: 2 }, { name: 'SARAH', number: 5 }, { name: 'LILY', number: 5 }]

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