Las casillas de verificación seleccionadas se agregan al final de la URL, pero console.log regresa vacío. ¿Cuál podría ser la razón de ésto?

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

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

Manifestación