多步骤问卷答案收集应通过事件委托在父级卡片监听change/click事件，利用data-step-id和name或data-question-id精准提取当前卡片内radio、checkbox等控件值，组织为{stepId,answers}对象，并添加data-collected防重复提交。
在多步骤问卷中，每一步通常是一个独立的卡片（如 .step-card），内部包含多个单选、多选或输入控件。用事件委托在父级卡片上统一监听并收集所有选项，关键不是“绑定一次监听”，而是“一次监听 + 精准定位 + 结构驱动提取”。核心在于：不依赖每个控件的 ID 或 class 名硬匹配，而是靠语义化结构和 data 属性自动识别当前卡片内的有效答案。
确保每张卡片自带唯一标识与数据上下文
每张步骤卡片应有明确的 data-step-id，且内部选项使用标准语义标签（input[type="radio"]、input[type="checkbox"]、select、textarea）并统一用 name 或 data-question-id 标识题干：
- 给卡片加
data-step-id="step-1"，方便后续归档答案 - 所有可答控件（包括 radio/checkbox 组）都带
name="q1"或data-question-id="q1" - 避免用
id="answer1"这类全局唯一但无上下文的写法，容易跨卡片冲突
在卡片容器上监听点击/变更事件，而非按钮或输入框
不要给“下一步”按钮单独绑定事件，而是监听卡片自身的 change（适用于表单控件）或 click（适用于自定义按钮），再用 event.target.closest('.step-card') 安全定位当前卡片：
- 监听
document.body或公共容器（如#survey-steps）上的change事件 - 通过
const card = e.target.closest('.step-card')获取当前操作所处的卡片 - 若点击的是“下一步”按钮，也可监听其
click，再向上找卡片，逻辑一致
从卡片内批量提取答案，按结构自动归类
拿到卡片元素后，用 card.querySelectorAll('input, select, textarea') 扫描全部控件，再按类型分别处理：
- 对
type="radio"：只取同name下被选中的一个value - 对
type="checkbox"：取所有:checked的value组成数组 - 对
select[multiple]：取selectedOptions的value数组 - 对
textarea或input[type="text"]：直接取.value.trim() - 结果组织为对象：
{ stepId: 'step-1', answers: { q1: 'A', q2: ['X','Y'], q3: '其他说明' } }
配合状态管理，避免重复提交或遗漏
收集完立即更新卡片状态，防止用户反复触发或跳步漏填：
- 给已收集答案的卡片添加
data-collected="true"属性 - 下次触发时先检查该属性，已收集则跳过或提示“已保存”
- 可同步禁用本卡片内所有控件（
card.querySelectorAll('input, select').forEach(el => el.disabled = true)），视觉+交互双重锁定
