本文介绍一种基于事件委托的高效方案，用于实时收集并同步多个表单项（复选框 + 姓名输入框 + 数值下拉框）的选中状态与对应值，支持自动添加/移除键值对，最终以结构化对象形式维护当前有效数据。
本文介绍一种基于事件委托的高效方案，用于实时收集并同步多个表单项（复选框 + 姓名输入框 + 数值下拉框）的选中状态与对应值，支持自动添加/移除键值对，最终以结构化对象形式维护当前有效数据。
在构建动态表单时，常需处理「行级联动」场景：每行包含一个复选框（控制启用/禁用）、一个文本输入框（如姓名）和一个数值下拉框（如数量 1–10）。核心需求是——仅当复选框被勾选时，才将该行的姓名与所选数值作为一对键值存入数据结构；取消勾选时，立即从数据中移除该条目。这要求数据具备实时性、可追溯性与结构一致性。
✅ 推荐实现：事件委托 + 行内 DOM 遍历
为避免为每个复选框单独绑定事件（性能差、难以维护），我们采用事件委托：将 change 事件监听器统一绑定到所有行的公共父容器（如 #wrapper），再通过 event.target 判断是否为复选框触发，并利用 DOM 相邻关系精准定位同级的 <input> 和 <select></select> 元素。
<div id="wrapper">
<div>
<input type="checkbox" class="row-checkbox">
<input type="text" placeholder="姓名（如 BOB）" />
<select>
<option value="1">1</option>
<option value="2">2</option>
<!-- ... -->
<option value="10">10</option>
</select>
</div>
<div>
<input type="checkbox" class="row-checkbox">
<input type="text" placeholder="姓名（如 SARAH）" />
<select>...</select>
</div>
<!-- 更多行 -->
</div>// 存储当前所有已选中的 {姓名: 数值} 映射
const selectedData = {};
document.querySelector("#wrapper").addEventListener("change", function (event) {
if (event.target.type !== "checkbox") return;
const checkbox = event.target;
const nameInput = checkbox.nextElementSibling;
const selectEl = nameInput.nextElementSibling;
if (checkbox.checked) {
// 勾选：以姓名为 key，下拉值为 value 存入对象
// ⚠️ 注意：建议对 nameInput.value 做非空校验（见下方注意事项）
selectedData[nameInput.value] = selectEl.value;
} else {
// 取消勾选：删除对应 key
delete selectedData[nameInput.value];
}
console.log("当前选中数据:", selectedData);
// 示例输出：{ "BOB": "2", "SARAH": "5", "LILY": "5" }
});⚠️ 关键注意事项
-
姓名不可重复：因使用
nameInput.value作对象 key，若两行填写相同姓名（如都填 “BOB”），后选中的会覆盖前者。如需支持重复姓名，请改用唯一标识（如行索引i或生成 UUID）作为 key，并改用数组存储对象：// 替代方案：用数组保存 {name, quantity} 对象 const selectedArray = []; // 勾选时：selectedArray.push({ name: nameInput.value, quantity: selectEl.value }); // 取消勾选时：selectedArray = selectedArray.filter(item => item.name !== nameInput.value); 输入校验建议：生产环境应校验
nameInput.value.trim()是否为空，避免存入空 key；也可为<input>添加required属性并配合checkValidity()提前拦截。下拉框
value类型：selectEl.value返回字符串（如"5"），如需数字类型，可用Number(selectEl.value)或一元加号+selectEl.value转换。初始状态同步：若页面加载时部分复选框默认
checked，需在脚本初始化后手动遍历并同步一次数据。
✅ 最终效果与数据结构
该方案输出的是标准 JavaScript 对象，形如：
{ "BOB": "2", "SARAH": "5", "LILY": "5" }它天然支持快速查找（selectedData["BOB"]）、遍历（Object.entries(selectedData)）及序列化（JSON.stringify(selectedData)），便于提交至后端或参与后续业务逻辑。
? 提示：如需导出为类似
[[“BOB”, “2”], [“SARAH”, “5”]]的二维数组，可调用Object.entries(selectedData)；如需转换为数组对象格式[{"name":"BOB","qty":"2"},...]，可用Object.entries(selectedData).map(([name, qty]) => ({ name, qty }))。
