多步骤表单中切换步骤时如何保留已选Radio选项状态？

问题的核心原因是：同一页面内，所有name属性值相同的Radio按钮会被浏览器视为同一单选组，同一组内始终只能有一个选项处于选中状态。你步骤2和步骤3的Radio大概率使用了相同的name值，导致跨步骤选择时，新选中的Radio会自动取消同组其他选项的选中状态。

具体解决方案 #

给不同步骤的Radio组设置独立的name属性，确保每个步骤的Radio组name值唯一：

<!-- 步骤2的Radio组 -->
<div class="form-step step-2">
  <input type="radio" id="step2-opt1" name="step2-choice" value="opt1">
  <label for="step2-opt1">选项1</label>
  
  <input type="radio" id="step2-opt2" name="step2-choice" value="opt2">
  <label for="step2-opt2">选项2</label>
</div>

<!-- 步骤3的Radio组 -->
<div class="form-step step-3">
  <input type="radio" id="step3-optA" name="step3-choice" value="optA">
  <label for="step3-optA">选项A</label>
  
  <input type="radio" id="step3-optB" name="step3-choice" value="optB">
  <label for="step3-optB">选项B</label>
  
  <input type="radio" id="step3-optC" name="step3-choice" value="optC">
  <label for="step3-optC">选项C</label>
</div>

额外建议 #

如果需要在表单提交后区分不同步骤的数据，可以给name属性添加统一前缀（比如form_step2_choice、form_step3_choice），这样后端接收数据时能更清晰地对应到具体步骤的选项。

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