javascript - 获取复选框(同名)作为数组

Question

我有一个包含一组复选框的 HTML 表单:

<p><input type="checkbox" name="fruits" value="apple" /> Apple</p>
<p><input type="checkbox" name="fruits" value="banana" /> Banana</p>
<p><input type="checkbox" name="fruits" value="strawberry" /> Strawberry</p>

当我单击一个按钮时，我希望将所有选中的同名复选框放在一个数组中。

因此，如果用户选择 Apple 和 Banana，我会期待这样的结果:

{ 'fruits' : [ 'Apple', 'Banana' ] }

我尝试使用 jQuery 的 serializeArray() 方法，但结果并不像我预期的那样......

[ { name="fruits",  value="apple"}, { name="fruits",  value="banana"} ]

我创建了这个 jsfiddle使用我的示例代码。

我知道我可以遍历这个数组并创建我想要的对象。但我的问题是:
是否有一种简洁明了的方式(使用 jQuery 或某些插件)来做到这一点？

*编辑:* 我正在寻找解决此问题的某种通用解决方案。我想告诉方法表单元素并让该方法自动查找所有数据。就像 jQuery.serializeArray() 所做的那样。

Answer 1

你可以使用map方法。

$('#submitBtn').click(function() {
    var obj = {};
    obj.fruits = $('input[name=fruits]:checked').map(function(){
        return this.value;
    }).get();
    console.log(obj);
});

http://jsfiddle.net/62f3X/1/

您还可以使用 name 属性创建属性:

$('#submitBtn').click(function() {
    var obj = {};
    $('input[type=checkbox]:checked').each(function() {
        if (!obj.hasOwnProperty(this.name)) 
            obj[this.name] = [this.value];
        else 
            obj[this.name].push(this.value);
    });
    // console.log(obj);
});

http://jsfiddle.net/62f3X/2/