点击按钮时如何动态检查单选按钮是否已选中？代码排查

点击表单「继续」按钮进入下一步时，需检查当前步骤是否至少有一个单选按钮被选中，要求逻辑动态通用，可适配所有目标字段。目前手写代码无法正常运行，已知直接指定单选按钮名称的方式可行，但需通过检查值的方式实现动态适配，请求排查代码问题。

原始代码 #

JavaScript #

function nextStep2(id) {
        var fieldname = $("#"+id).attr("name");
        var nomecampo = "m_"+fieldname;
        
        if (frmMain.nomecampo.value=="") {
            alert("Please select an answer to continue.");
            return;
        }

        $("#step" + current_step).fadeOut(200);
        $("#step" + (current_step + 1)).delay(200).fadeIn(200);
        current_step ++ ;
    }

HTML #

<form id="frmMain" name="frmMain">
     <input type="radio" class="noradio" name="m_question_step1" id="m_question_step1-1" value="yes">
     <label class="radio-inline" for="m_question_step1-1"><span>Yes</span></label>

     <input type="radio" class="noradio" name="m_question_step1" id="m_question_step1-2" value="yes">
     <label class="radio-inline" for="m_question_step1-2"><span>Yes</span></label>

     <button id="bottone1" class="button btn-full btnlight" type="button" name="question_step1" onclick="nextStep2(this.id);">Continue</button>
</form>

问题排查与修正 #

核心问题 #

1. 属性访问错误：frmMain.nomecampo的写法错误，nomecampo是变量，直接使用点语法会将其当作字符串属性名，而非变量对应的实际名称，需改用方括号语法frmMain[nomecampo]。
2. 单选按钮判断逻辑错误：单选按钮组的value属性不会返回选中项的值，只会返回组内第一个单选按钮的初始值。正确逻辑是检查该名称下是否存在被选中的单选按钮。

修正后的代码 #

function nextStep2(id) {
    var fieldname = $("#"+id).attr("name");
    var radioGroupName = "m_" + fieldname;
    
    // 检查对应名称的单选按钮组是否有选中项
    var hasCheckedRadio = $('input[name="' + radioGroupName + '"]:checked').length > 0;
    
    if (!hasCheckedRadio) {
        alert("请选择一个选项后继续。");
        return;
    }

    // 步骤切换逻辑保持不变
    $("#step" + current_step).fadeOut(200);
    $("#step" + (current_step + 1)).delay(200).fadeIn(200);
    current_step++;
}

说明 #

• 用jQuery的:checked选择器直接筛选被选中的单选按钮，通过length判断是否存在选中项，逻辑更直观且通用。
• 该逻辑可适配任意名称的单选按钮组，只要按钮的name属性遵循m_+按钮name的命名规则即可。

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