jQuery get complex multiple checked values from checkbox to array

I want to dynamically display the content of a site in relation to choice of visitors when it selects checkbox. No problem for sends information in Ajax and the php side. But I can not create an array like I want in jQuery.

HTML :

<div id="filter">
    <div class="sizes">
        <input type="checkbox" data-group="size_catalog" data-value="32">
        <input type="checkbox" data-group="size_catalog" data-value="36">
        <input type="checkbox" data-group="size_catalog" data-value="38">
        <input type="checkbox" data-group="size_catalog" data-value="40">
    </div>
    <div class="colors">
        <input type="checkbox" data-group="color_catalog" data-value="red">
        <input type="checkbox" data-group="color_catalog" data-value="blue">
        <input type="checkbox" data-group="color_catalog" data-value="black">
    </div>
</div>

The array "multidimensional" I would like to have (it is necessary to group the same data-group) :

var myArray = {size_catalog : ["32", "36", "38"], color_catalog: [red, blue]};

My current code that create a simple table :

    function getChecked(){
        var array = [];
        $checkboxes.each(function(){
            if(this.checked){
                opts.push(this.value);
            }
        });
        return opts;
    }

    function updateSearch(opts){
        $.ajax({
            type: "POST",
            url: "class.search.php",
            dataType : 'json',
            cache: false,
            data: {filterOpts: opts},
            success: function(records){
                ...
            }
        });
    }

    var $checkboxes = $("input:checkbox");
    $checkboxes.on("change", function(){
        var opts = getChecked();
        updateSearch(opts);
    });

    updateSearch();

Thank you for your help!