Получить флажки (с тем же именем), как массив

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, и банан я ожидаю, что-то вроде этого:

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

Я пытался использовать serializeArray JQuery в() метод, но результат не является, как я ожидал ...

[ { 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/

Answer 2

Там может быть лучший способ для достижения этой цели, но вы могли бы сделать:

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); 
}); 

http://jsfiddle.net/NzeVU/3/