Flutter API中如何创建数组并提交选中答案数组？

一、收集选中答案到数组 #

核心逻辑是监听选项的选择状态变化，实时维护存储选中值的数组：

• 给所有选项（比如复选框<input type="checkbox">）绑定change事件
• 每次状态变更时，遍历所有选项，筛选出checked为true的项，提取其value值存入数组

示例代码（原生JS）：

// 初始化存储选中答案的数组
let selectedAnswers = [];

// 获取所有选项元素
const answerOptions = document.querySelectorAll('.answer-option');

// 绑定change事件
answerOptions.forEach(option => {
  option.addEventListener('change', () => {
    // 重新筛选选中的选项，更新数组
    selectedAnswers = Array.from(answerOptions)
      .filter(opt => opt.checked)
      .map(opt => opt.value);
  });
});

如果是单选场景（<input type="radio">），逻辑更简洁：

let selectedAnswer = [];
const radioOptions = document.querySelectorAll('input[name="answer"]');

radioOptions.forEach(radio => {
  radio.addEventListener('change', () => {
    selectedAnswer = radio.checked ? [radio.value] : [];
  });
});

二、提交选中的答案数组 #

常见两种提交方式：

1. 传统表单提交

在表单中添加隐藏输入框，提交前将数组转为JSON字符串存入隐藏框，后端接收后再解析：

<form id="answerForm" action="/submit" method="post">
  <!-- 你的选项元素 -->
  <input type="hidden" id="selectedAnswersInput" name="selectedAnswers">
  <button type="submit">提交</button>
</form>

document.getElementById('answerForm').addEventListener('submit', (e) => {
  // 将数组转为JSON字符串存入隐藏框
  document.getElementById('selectedAnswersInput').value = JSON.stringify(selectedAnswers);
});

2. AJAX/Fetch异步提交

直接将数组作为请求参数发送给后端，原生Fetch或前端框架都支持直接传递数组：

// Fetch示例
fetch('/submit-answers', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ selectedAnswers: selectedAnswers }),
})
.then(response => response.json())
.then(data => {
  console.log('提交成功:', data);
})
.catch(error => {
  console.error('提交失败:', error);
});

注意事项 #

• 确保每个选项的value属性设置正确，对应后端需要的答案标识（如选项ID、内容哈希等）
• 若使用Vue/React等前端框架，可通过双向绑定或状态管理（Vuex/Redux）直接维护选中数组，无需手动监听DOM事件

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