本文介绍一种基于事件委托的高效方案，用于将每行中的复选框、姓名输入框和数量下拉框（1–10）三者关联；勾选时自动存入键值对对象，取消勾选则实时移除，确保数据始终与用户操作严格一致。
本文介绍一种基于事件委托的高效方案，用于将每行中的复选框、姓名输入框和数量下拉框（1–10）三者关联；勾选时自动存入键值对对象，取消勾选则实时移除，确保数据始终与用户操作严格一致。
在构建动态表单时，常见需求是为每行提供「启用开关（checkbox）+ 名称输入（input）+ 数量选择（select）」三元组合，并要求：✅ 勾选某行时，将其名称与所选数值作为一个逻辑单元加入结果集；❌ 取消勾选时，该单元立即从结果中删除；? 所有操作实时响应，无需手动刷新或批量提交。
直接为每个复选框绑定独立事件监听器不仅冗余，还难以维护。更优解是采用事件委托（Event Delegation）：将监听器统一绑定到公共父容器上，利用事件冒泡机制精准捕获目标 checkbox 的 change 事件，并通过 DOM 遍历快速定位同行的 input 和 select 元素。
✅ 核心实现逻辑
- 使用一个
results对象（非嵌套数组）作为数据存储结构，以姓名（<input>值）为 key，数量（<select></select>值）为 value； - 为包裹所有行的容器（如
<div id="wrapper">）添加 <code>change监听器； - 在回调中判断
event.target是否为 checkbox，再根据其checked状态决定：- 若为
true：读取紧邻的<input>（姓名）和下一个<select></select>（数量），写入results[name] = quantity； - 若为
false：用delete results[name]移除对应条目；
- 若为
- 每次变更后可直接使用
results对象，例如序列化为 JSON 或提交至后端。
? 完整示例代码
<div id="wrapper">
<div>
<input type="checkbox" class="row-checkbox"><input type="text" placeholder="Enter name" value="BOB"><select><option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option></select>
</div>
<div>
<input type="checkbox" class="row-checkbox"><input type="text" placeholder="Enter name" value="SARAH"><select><option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option></select>
</div>
<div>
<input type="checkbox" class="row-checkbox"><input type="text" placeholder="Enter name" value="LILY"><select><option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option></select>
</div>
</div>
<script>
const results = {};
document.querySelector("#wrapper").addEventListener("change", function(event) {
if (event.target.classList.contains("row-checkbox")) {
const row = event.target.closest("div"); // 更健壮地获取当前行（推荐）
const nameInput = row.querySelector("input[type='text']");
const selectEl = row.querySelector("select");
if (event.target.checked) {
results[nameInput.value] = selectEl.value;
} else {
delete results[nameInput.value];
}
console.log("Current selection:", results);
// 示例输出：{ BOB: "2", SARAH: "5", LILY: "5" }
}
});
</script>
⚠️ 注意事项
- 原答案中使用
nextElementSibling依赖严格的 HTML 结构顺序，一旦插入其他元素（如 label、span）即失效。强烈建议改用closest()+querySelector()方式定位同行元素（如上示例），提升鲁棒性。- 姓名输入框应设置
type="text"并赋予明确 class（如name-input），避免与 checkbox 或 select 混淆；也可添加防空校验（如nameInput.value.trim()）。- 若需支持重复姓名，应改用数组存储对象（如
{ name: "BOB", qty: "2" }），并配合唯一 ID 或索引管理。- 最终数据格式为标准 JavaScript 对象，可直接
JSON.stringify(results)用于 API 提交，无需额外转换。
该方案简洁、可扩展、低耦合，适用于任意行数的动态表单场景，是前端表单联动处理的经典实践。
