JavaScript中动态变量获取单选按钮选中值返回undefined的解决方法

这个问题我在日常开发中碰到过很多次，核心问题出在你写jQuery选择器的方式上——你直接把变量index写进了选择器字符串里，导致它被当成了字面量"index"，而不是循环中实际的索引值，自然找不到对应的单选按钮，返回undefined。

错误原因解析 #

你原来的代码里这一行：

var checkedAnswer = $('input[name=index]:checked').val();

这里的name=index中的index是字符串，不是你定义的变量。jQuery会去查找所有name属性等于字符串"index"的input元素，而不是你循环中i对应的数字字符串（比如"1"），所以结果必然是undefined。

正确的实现方式 #

这里有几种简单的修正方法，选哪种都可以：

方法1：字符串拼接 #

把变量和选择器字符串拼接起来，注意给name属性值加上引号（规范写法，避免数字类型的name出现解析问题）：

function myFunction(){ 
  var numberOfQuestions = 1; 
  for (var i = 1; i <= numberOfQuestions; i++) { 
    var index = i.toString(); 
    // 用字符串拼接把变量插入到选择器中
    var checkedAnswer = $('input[name="' + index + '"]:checked').val(); 
    // 可以打印出来验证结果
    console.log("第" + i + "题选中值：", checkedAnswer);
  }
}

方法2：ES6模板字符串（更简洁） #

如果你的项目支持ES6语法，用模板字符串会更直观，变量放在${}里即可：

function myFunction(){ 
  var numberOfQuestions = 1; 
  for (var i = 1; i <= numberOfQuestions; i++) { 
    var index = i.toString(); 
    // 模板字符串写法
    var checkedAnswer = $(`input[name="${index}"]:checked`).val(); 
    console.log("第" + i + "题选中值：", checkedAnswer);
  }
}

方法3：jQuery属性筛选方法 #

也可以用jQuery的filter方法来筛选元素，逻辑更清晰：

function myFunction(){ 
  var numberOfQuestions = 1; 
  for (var i = 1; i <= numberOfQuestions; i++) { 
    var index = i.toString(); 
    var checkedAnswer = $('input').filter(`[name="${index}"]:checked`).val(); 
    console.log("第" + i + "题选中值：", checkedAnswer);
  }
}

额外注意事项 #

• 如果当前题目没有选中任何单选按钮，val()依然会返回undefined，你可以提前判断这种情况，比如：

  if(checkedAnswer !== undefined) {
    // 处理选中值
  } else {
    // 提示用户未选择
  }
  

• 确保循环中的index值和单选按钮的name属性完全一致（比如都是字符串类型的"1"，而不是数字1）。

内容的提问来源于stack exchange，提问作者In-young Choung