如何将HTML表单中选中的所有复选框值提交至WebAPI？

常见原因 #

• 前端复选框的name属性未设置为数组格式，导致表单提交时仅传递第一个选中值
• 后端模型属性未使用集合类型（如List<string>、string[]）接收复选框值
• 直接从请求取值时，误用了仅返回单个值的方法，而非获取所有值的方法

解决方法 #

1. 修正前端复选框的name属性 #

将复选框的name设置为[字段名][]格式，让表单自动把所有选中值以数组形式提交：

<!-- 示例：爱好复选框 -->
<input type="checkbox" name="hobbies[]" value="reading" /> 阅读
<input type="checkbox" name="hobbies[]" value="coding" /> 编程
<input type="checkbox" name="hobbies[]" value="running" /> 跑步

2. 后端用模型接收（推荐） #

定义模型时，对应复选框的属性使用集合类型：

public class UserFormModel
{
    public string Username { get; set; } // 文本框字段
    public string Gender { get; set; } // 单选框字段
    public List<string> Hobbies { get; set; } // 对应前端的hobbies[]
}

控制器方法直接接收模型即可自动绑定所有选中值：

[HttpPost("submit")]
public IActionResult SubmitForm(UserFormModel formModel)
{
    // formModel.Hobbies 就是所有选中的复选框值
    return Ok(new { success = true, data = formModel });
}

3. 直接从请求中获取值 #

如果不使用模型，调用Request.Form.GetValues()方法获取所有选中值，不要用Request.Form["字段名"]（仅返回第一个值）：

[HttpPost("submit")]
public IActionResult SubmitForm()
{
    string[] selectedHobbies = Request.Form.GetValues("hobbies[]");
    // 处理选中值逻辑
    return Ok(new { success = true, hobbies = selectedHobbies });
}

4. AJAX提交的注意事项 #

如果用AJAX提交表单，确保使用FormData或正确的序列化方式，避免手动拼接数据导致丢失多选值：

const form = document.getElementById("userForm");
const formData = new FormData(form);

fetch("/api/Form/submit", {
    method: "POST",
    body: formData
})
.then(res => res.json())
.then(data => console.log(data));

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