将复选框转换为 JSON 数组

Question

我正在尝试序列化表单上的复选框，其中多个复选框将具有相同的名称。

<input name="mycheckbox" type="checkbox" value="A"/>A</br>      
<input name="mycheckbox" type="checkbox" value="B"/>B</br>

使用如下所示的序列化数组，一切都很好用。 如果同时选中 A 和 B，则 JSON.stringify 正确地将 JSON 表示为数组：

{"mycheckbox":["A","B"]}  

但是，如果我只检查了 A，则 JSON 不再表示为数组：

{"mycheckbox":"A"}  

在我的 RESTful 后端中，我需要始终如一地作为数组传递。 有没有办法强制字符串化将其表示为数组？

var jsonData = JSON.stringify($('form').serializeObject());
$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

Answer 1

您必须按名称查找表单中的每个元素，并检查它是否为复选框。

但请注意，拥有多个文本框、密码、文件上传等也是完全有效的。 除了碰巧查看窗体时存在两个具有相同名称的成功控件之外，没有任何内容以任何方式将窗体输入定义为"多个"。

当您知道需要数组时，在后端处理此问题可能会更容易。 或者使用普通的旧表单编码而不是 JSON 提交表单，并让后端的 HTTP 库处理它。 （他们中的大多数都让你做一些类似request.GET.getall('mycheckbox')的事情，以始终取回列表。

Answer 2

如果你不想直接修改插件的代码，你可以简单地修改对象。

var formData = $('form').serializeObject(),
    mycheckboxVal = formData.mycheckbox;
if (!$.isArray(mycheckboxval)) {
    formData.mycheckbox = [mycheckboxval];
}
//then you serialize
var jsonData = JSON.stringify(formData);

如果您愿意，也可以在服务器端执行相同的逻辑。