使用jQuery读取单选按钮值时返回undefined问题求助

我来帮你捋清楚这个问题的根源，以及更简洁的解决方案~

问题出在哪？ #

你原来的选择器写法有个隐藏的坑：

$('input:radio[name='+questionnaire[currentQuestion].name+']:checked').val()

当你的单选按钮name属性值包含特殊字符（比如连字符、空格，哪怕例子里的comfortfood没问题，但如果是comfort-food这类就会出错），直接拼接成name=xxx的形式会导致CSS选择器解析错误，jQuery找不到对应的元素，自然返回undefined。

另外，动态创建表单元素时，用attr()设置type、name这类固有DOM属性，不如用prop()更可靠——jQuery对表单元素的固有属性处理，prop()是专门针对这类属性设计的。

正确的读取方式 #

给选择器里的name值加上双引号，确保选择器能正确解析：

// 用模板字符串更简洁，也能避免拼接错误
const selectedValue = $(`input:radio[name="${questionnaire[currentQuestion].name}"]:checked`).val();

如果还是担心选择器的问题，也可以通过表单上下文来缩小查找范围，比如你的表单有id="question-form"，可以写成：

const selectedValue = $('#question-form input:radio[name="' + questionnaire[currentQuestion].name + '"]:checked').val();

这样能避免页面其他同名元素干扰。

优化你的表单创建代码 #

顺便给你优化下创建单选按钮的代码，不仅更可靠，还能提升页面可访问性：

let options = $('<div></div>');
// 提前缓存问题名称，避免重复访问对象属性
const questionName = questionnaire[currentQuestion].name;

for (let answer of questionnaire[currentQuestion].answers) {
  // 用prop设置表单元素的固有属性
  let radio = $('<input>').prop({
    type: 'radio',
    name: questionName,
    value: answer.value,
    id: `radio-${questionName}-${answer.value}` // 给单选按钮加唯一id，关联label
  });
  
  // 创建label并关联到单选按钮，提升可访问性（点击label也能选中单选框）
  let label = $('<label>')
    .attr('for', radio.attr('id'))
    .text(answer.label);
  
  // 把单选按钮和label放到一起，语义更清晰
  options.append(radio).append(label).append('<br>'); // 加换行方便排版
}

为什么点击事件能解决？ #

你用点击事件里的event.currentTarget能拿到值，是因为这个对象就是当前被点击的单选按钮DOM元素，直接读取它的value属性绕开了选择器解析的问题，相当于跳过了“查找元素”这一步，自然不会出现找不到元素的情况。

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