如何确保复选框提交时names字段始终为数组格式？

我之前对接后端时也碰到过这种对数组格式要求严格的情况，给你几个最优解决思路，按需选择：

方法1：利用serializeToJSON原生配置参数 #

如果你的serializeToJSON版本支持相关配置（主流版本基本都支持），直接在调用时传入参数，就能强制复选框返回数组，同时处理未选中的空数组场景：

$(function () {
  $("#download").on("submit", function (event) {
    event.preventDefault();
    var $form = $(this);
    // 传入配置，强制复选框输出数组，未选中时返回空数组
    const formData = $form.serializeToJSON({
      checkboxesAsArray: true, // 让复选框始终以数组形式返回
      emptyArrays: true        // 未选中任何复选框时生成空数组
    });
    console.log(formData);
    // 后续AJAX请求逻辑保持不变
    $.ajax({
      url: "/download",
      data: JSON.stringify(formData),
      dataType: "json",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      type: "post"
    })
    .done(function (data, status, xhr) { })
    .fail(function (xhr, status, error) { });
  });
});

这个方法最简洁，完全依托插件能力，不需要额外编写处理逻辑。

方法2：手动处理序列化结果（兼容性最强） #

如果你的serializeToJSON版本不支持上述配置，或者想完全自主控制格式逻辑，可以在序列化后手动修正names字段：

$(function () {
  $("#download").on("submit", function (event) {
    event.preventDefault();
    var $form = $(this);
    const formData = $form.serializeToJSON();
    
    // 强制将names转为数组格式
    if (!formData.names) {
      // 未选中任何复选框，设为空数组
      formData.names = [];
    } else if (!Array.isArray(formData.names)) {
      // 仅选中一个复选框，转为单元素数组
      formData.names = [formData.names];
    }
    // 此时names字段始终为数组类型
    console.log(formData);
    
    // 后续AJAX请求逻辑保持不变
    $.ajax({
      url: "/download",
      data: JSON.stringify(formData),
      dataType: "json",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      type: "post"
    })
    .done(function (data, status, xhr) { })
    .fail(function (xhr, status, error) { });
  });
});

这个方法兼容性拉满，不管插件版本如何，都能保证输出完全符合后端要求。

方法3：修改HTML的name属性（需配合后端调整） #

你也可以给复选框的name属性加上[]后缀（比如name="names[]"），多数表单序列化插件会自动将其识别为数组类型：

<form id="download">
  <label>
    <input name="names[]" id="doc1" value="doc1" type="checkbox">File 1
  </label>
  <label>
    <input name="names[]" id="doc2" value="doc2" type="checkbox">File 2
  </label>
  <button class="button" type="submit">Download</button>
</form>

注意：这个方法需要后端同步调整接收字段的解析规则（比如适配names[]格式的参数），如果后端无法修改，这个方案就不适用。

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