Selected checkboxes are appended to the end of the URL, but console.log returns empty. What could be the reason for this?

HTML:

<div class="panel-body">
                <div class="rowElem">
                  <input type="checkbox" name="chbox" id="" value="Color #1">
                  <label>Color #1</label>
                </div>
                <div class="rowElem">
                  <input type="checkbox" name="chbox" id="" value="Color #2">
                  <label>Color #2</label>
                </div>
                <div class="rowElem">
                  <input type="checkbox" name="chbox" id="" value="Color #3">
                  <label>Color #3</label>
                </div>
              </div>

JS:

$('input[type="checkbox"]').on('change', function(e){
    var data = {},
        fdata = [],
        loc = $('<a>', {href:window.location})[0];
    $('input[type="checkbox"]').each(function(i){
        if(this.checked){
            if(!data.hasOwnProperty(this.name)){
                data[this.name] = [];
            }
            data[this.name].push(this.value);
        }
    });
    $.each(data, function(k, v){
        fdata[k] = [v.join(',')];
    });
    fdata = fdata.join('&');

    console.log(fdata);
});

Sample: https://example.com/?foo=1,2,3,4&...

Demo