本文介绍一种通用、动态的 javascript 方法，用于在点击按钮时检查指定名称的单选按钮组（radio group）是否至少有一项被选中，避免硬编码字段名，提升表单验证的复用性与可维护性。
本文介绍一种通用、动态的 javascript 方法，用于在点击按钮时检查指定名称的单选按钮组（radio group）是否至少有一项被选中，避免硬编码字段名，提升表单验证的复用性与可维护性。
在多步骤表单中，常需对每组单选按钮（如“是/否”、“选项A/B/C”）进行必选校验。原始代码试图通过 frmMain.nomecampo.value 访问动态字段名，但该写法将字符串 "nomecampo" 当作属性名而非变量值，导致始终读取失败（undefined 或空字符串），无法正确检测选中状态。
正确的做法是：根据按钮的 name 属性（如 name="question_step1"）推导对应 radio 组的 name（如 "m_question_step1"），再使用 jQuery 的 :checked 伪类筛选并判断是否存在已选中的 radio 元素。以下是优化后的完整实现：
function nextStep2(buttonId) {
const $button = $("#" + buttonId);
const fieldName = $button.attr("name"); // 获取按钮 name，如 "question_step1"
const radioGroupName = "m_" + fieldName; // 动态生成 radio 组名，如 "m_question_step1"
// 查找同名 radio 组中是否有被选中的项
const isChecked = $(`input[type="radio"][name="${radioGroupName}"]:checked`).length > 0;
if (!isChecked) {
alert("Please select an answer to continue.");
return;
}
// 执行步骤切换动画
$("#step" + current_step).fadeOut(200, function() {
$("#step" + (current_step + 1)).delay(200).fadeIn(200);
current_step++;
});
}对应的 HTML 保持不变，仅需确保按钮 name 与 radio 组 name 前缀逻辑一致（如按钮 name="question_step1" → radio name="m_question_step1"）：
<form id="frmMain">
<input type="radio" name="m_question_step1" value="yes" id="m_question_step1-1">
<label for="m_question_step1-1">Yes</label>
<input type="radio" name="m_question_step1" value="no" id="m_question_step1-2">
<label for="m_question_step1-2">No</label>
<button
id="bottone1"
type="button"
name="question_step1"
onclick="nextStep2(this.id);">
Continue
</button>
</form>✅ 关键改进点：
- 使用模板字符串 input[type="radio"][name="${radioGroupName}"]:checked 精准定位目标 radio 组；
- 利用 .length > 0 判断是否存在选中项，语义清晰、性能高效；
- 完全动态：无需修改函数即可适配任意 name 规则（如改为 "q_step1" 只需调整拼接逻辑）；
- 避免 DOM 层级依赖（如不依赖 frmMain 表单对象访问），增强健壮性。
⚠️ 注意事项：
- 确保所有同组 radio 元素的 name 属性完全一致（区分大小写）；
- 若页面存在多个表单，建议为选择器添加上下文（如 $("#frmMain").find(...)）防止误匹配；
- 生产环境推荐使用 addEventListener 替代内联 onclick，以提升可测试性与关注点分离。
此方案兼顾简洁性与扩展性，是构建动态多步骤表单验证的理想实践。
