Implementing check all functionality using jquery and storing all values in array

I have implemented partially a functionality where I have "check all" checkbox which checks every checkbox in the checkbox list... Next thing I want to do is when user clicks on check all checkbox, that the jquery stores all selected checkboxes values (id's) into an array. Here is how I did so far:

  $(document).on('click', '.chkAll', function () {
            $("#tableProducts thead tr th input:checkbox").change(function () {  //"select all" change 
                $(".chkItem").prop('checked', $(this).prop("checked")); //change all ".chkItem" checked status

            });
        });

This works okay and when I click on check-all checkbox, rest of the items below are all checked. Here is how I stored individual checkbox values when they are clicked (without check-all checbkox):

var product_ids = {};

 $(document).on('click', '.chkItem', function () {
            if ($(this).is(':checked')) {
                product_ids[$(this).attr('id')] = "Checked";
            } else {
                delete product_ids[$(this).attr('id')];
            }
        });

And this works fine for when clicking individual checkboxes... How can I now store all checkbox values into the array when "check-all" checkbox is clicked??

I imagine I would need some kind of for loop, but I don't have much experience with jquery so I'm not sure what to do next?