Сохраните установленное значение флажка и его имя в двухмерном массиве

Question

Я хочу сохранить установленное значение флажка и его имя в двухмерном массиве, здесь - код html.

<h3>Select your favorite sports:</h3> 
<label> 
    <input type="checkbox" value="football" name="football"> Football</label> 
<label> 
    <input type="checkbox" value="baseball" name="baseball"> Baseball</label> 

И я могу только показать проверенные значения checbox, вот JQuery код

$(document).ready(function() { 
    $("button").click(function() { 
     var favorite = []; 
     $.each($("input:checked"), function() { 
      favorite.push($(this).val()); 
     }); 
     alert("My favourite sports are: " + favorite); 
    }); 
}); 

Мой вопрос, как сохранить оба значения, и это имя любимого массива?

Answer 1

Вы можете использовать Array of objects для этого:

favorite.push({ 
    name: $(this).attr('name'), 
    value:$(this).val() 
}); 

See it in action

Выход:

[{ 
    "name": "football", 
    "value": "football" 
}, { 
    "name": "baseball", 
    "value": "baseball" 
}] 

---

Если вы хотите отобразить значения:

$.each(favorite, function(index, obj){ 
    console.log("Name= "+ obj.name+" Value="+ obj.value); 
}) 

Answer 2

использование map() .Translate все элементы массива или объекта

var favorite= $("input:checked").map(function() { 
    var obj = {}; 
    obj[$(this).attr('name')] = this.value; 
    return obj; 

}).get(); 

console.log(favorite) 

DEMO

Answer 3

Используйте массив объектов

$(document).ready(function() { 
    $("button").click(function() { 
     var favorite = []; 
     $.each($("input:checked"), function() { 

      // Add object in array 
      favorite.push({ 
       name: $(this).attr('name'), 
       value: $(this).val() 
      }); 
     }); 
     console.log("My favourite sports are: "); 
     console.log(favorite); 
    }); 
});