jQuery - serializeArray() 未获取选中复选框的值

Question

我有一个作为标志的形式的复选框。

为了做到这一点，我添加了一个隐藏的输入元素，以便如果未选中复选框，仍会保存某些内容

<form action="">
    ...
        <input type="hidden" name="foo" value="no" />
        <input type="checkbox" name="foo" value="yes">
    ...
</form>

我遇到的问题是，当我

1. 选中复选框
2. 然后在表单上运行 jQuery.serializeArray()

为 foo 元素设置的值为“no”

Object { name="foo", value="no"}

不应该 serializeArray() 模拟浏览器行为吗？如果是这样，如果选中复选框，它不应该返回“是”吗？

我正在使用 jQuery v1.10.2

Answer 1

简而言之：不。serializeArray 方法仅在选中的情况下返回复选框。因此，只要它不被检查，它就会忽略它。不过，如果您检查了它，它将直接返回您输入的值。

请查看http://api.jquery.com/serializearray/上的演示。

Answer 2

serializeArray在具有多个同名输入的表单上使用，将为每个元素返回多个对象（如果选中）。这意味着以下 HTML 将返回以下对象。因此，所讨论的数据就在那里并且可用。因此，我假设您尝试将数据操纵在一个对象中，或者将其发布到服务器，该服务器仅考虑带有该键的第一个值的数据。您只需确保任何checkbox元素优先即可。

返回对象：

[
    {
        name:"foo",
        value:"no"
    },
    {
        name:"foo2",
        value:"no"
    },
    {
        name:"foo2",
        value:"yes"
    }
] 

HTML：

<form>
    <input type="hidden" name="foo" value="no" />
    <input type="checkbox" name="foo" value="yes" />

    <input type="hidden" name="foo2" value="no" />
    <input type="checkbox" name="foo2" value="yes" checked />
</form>

JS：

console.log($('form').serializeArray());

演示版

另一种方法是删除隐藏字段，在提交表单之前检查每个未选中的复选框，并检查其中是否有任何serializeArray同名数据。如果不是，只需将其作为off.

$('#submit').on('click', function(){
    var arr = $('form').serializeArray(),
        names = (function(){
            var n = [],
                l = arr.length - 1;
            for(; l>=0; l--){
                n.push(arr[l].name);
            }

            return n;
        })();

    $('input[type="checkbox"]:not(:checked)').each(function(){
        if($.inArray(this.name, names) === -1){
            arr.push({name: this.name, value: 'off'});
        }
    });

    console.log(arr);
});

演示版