Javascript 获取与数组同名的复选框

我有一个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>

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

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

我已经用我的示例代码创建了这个

我知道我可以迭代这个数组并创建我想要的对象。但我的问题是：
有没有一种干净简单的方法（使用jQuery或一些插件）来实现这一点？

---

*编辑：*我正在寻找这个问题的某种通用解决方案。我想告诉一个方法表单元素，并让该方法自动查找所有数据。就像jQuery.serializeArray（）一样。

您可以使用

map

方法

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

您还可以使用创建属性，方法是使用

name

properties:

$('#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);
});

---

可能有更好的方法来实现这一点，但您可以：

var fruits = [];

$('#selectAll').click(function() {
   $('input:checkbox').prop('checked', true);
});

$('#submitBtn').click(function() {
   $("input[name=fruits]:checked").each(function() {
     var fruit = $(this).val();
     fruits.push(fruit);
  });

  console.log(fruits);
});

---

我喜欢这件衣服的外观！但是我仍然需要手动设置

obj.fruits

。是否可以只传递表单元素并让一个方法自己确定名称和值？太棒了。这正是我想要的。谢谢。：）我更喜欢这个解决方案，而不是公认的解决方案。甚至可以修剪一行，只需按$（this.val（）或$（this.value）。

var fruits = [];

$('#selectAll').click(function() {
   $('input:checkbox').prop('checked', true);
});

$('#submitBtn').click(function() {
   $("input[name=fruits]:checked").each(function() {
     var fruit = $(this).val();
     fruits.push(fruit);
  });

  console.log(fruits);
});