.NET MVC Core循环内表单JQuery/Ajax提交仅返回首个选项问题

看起来你遇到了循环生成表单时单选值收集的典型问题——这通常是因为单选组的命名没有区分问题，或者收集数据的方式不对导致只拿到第一个选中项。我来给你梳理下解决方案：

核心问题分析 #

你当前的代码可能存在两个关键问题：

1. 所有问题的单选按钮共用了同一个name属性，导致浏览器将其视为同一组单选控件，选择器获取值时只会返回第一个匹配项；
2. 收集选中值时没有按问题分组，全局获取选中的单选按钮自然只能拿到第一个结果。

分步解决方法 #

1. 重构HTML结构，确保单选组按问题区分 #

首先，在循环生成每个问题的单选按钮时，给每个问题的单选组设置唯一的name属性，最好结合问题ID来命名，同时给每个问题容器添加问题ID的标识（比如data-*属性）。示例结构如下（假设你用模板引擎渲染）：

<!-- 每个问题的容器 -->
<div class="question-item" data-question-id="{{ question.id }}">
  <h3>{{ question.title }}</h3>
  <!-- 循环生成该问题的答案单选按钮 -->
  {{#each question.answers}}
  <label>
    <input type="radio" name="answer_{{ ../question.id }}" value="{{ id }}">
    {{ content }}
  </label>
  {{/each}}
</div>

<button id="saveLink">保存答案</button>

这样每个问题的单选按钮组都是独立的，用户选择时不会互相干扰，也方便我们后续按问题收集值。

2. 用jQuery按问题分组收集选中值 #

点击保存按钮时，不要全局获取所有选中的单选按钮，而是遍历每个问题容器，单独收集对应问题的选中答案，最后整理成键值对（问题ID => 选中的答案ID）提交。示例代码：

$('#saveLink').click(function(e) {
  e.preventDefault(); // 阻止默认跳转行为
  const answerData = {};

  // 遍历每个问题容器
  $('.question-item').each(function() {
    const $question = $(this);
    const questionId = $question.data('question-id');
    // 找到当前问题下被选中的单选按钮
    const selectedAnswer = $question.find('input[type="radio"]:checked').val();

    // 如果该问题有选中项，存入数据对象
    if (selectedAnswer) {
      answerData[questionId] = selectedAnswer;
    }
  });

  // 发送Ajax请求提交数据
  $.ajax({
    url: '/your-save-endpoint', // 替换为你的后端接口地址
    method: 'POST',
    data: { answers: answerData },
    success: function(response) {
      console.log('答案保存成功！', response);
      // 这里可以添加成功后的交互，比如提示弹窗或局部刷新
    },
    error: function(xhr, status, err) {
      console.error('保存失败：', err);
      // 处理错误情况
    }
  });
});

关键说明 #

• 通过data-question-id绑定问题ID，确保每个答案都能对应到正确的问题；
• 用find()方法在当前问题容器内查找选中的单选，避免跨问题的干扰；
• 整理成answerData对象提交，后端可以轻松解析每个问题对应的答案，批量写入数据库。

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