jQuery add multiple filter parameters to url

I have multiple groups of checkboxes that are used to filter search results. For example, a search for shirts would have group one as colors, which includes things like, black, blue, red and group two as sizes, which includes things like, small, medium, large. Standard stuff...

The url for this example would look like the following, after a search is made, and the filters are applied:

http://ift.tt/2pnmUUs

This would return me all items that match the keyword search, with the filters of colors (red and black), and sizes (small and medium).

I have all of the backend done, but I am not very great when it comes to the front end of things...

The code below does just about what I want, except it has it's flaws for my situation which I've explained below.

<script type="text/javascript">
      function GetFilters() {
          console.log("rom");
          $('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);
                  }
              });
              // get the key
              var key = Object.keys(data)[0];
              // and the data
              // it works to without joining
              var fdata = key+"="+data[key].join(',');
              // and if you wanna strip the whitespaces
              // use fdata = fdata.replace(/\s/g,"");
              $.ajax({
                type: "POST",
                url: "/ajax/get",
                data: {
                      "_token": "",
                      "fdata": fdata
                    },
                success: function (response) {
                  $('#d2d-results').html(response);
                }
              });
              if (history.pushState) {
                  history.pushState(null, null, loc.pathname + '?' + fdata);
              }
          });
      }
      window.onload = GetFilters;
  </script>

The code works for the most part. When I click a checkbox, it appends to the url and the ajax request is done. Works great...

But the issues I am having with said code is that when I uncheck the last checkbox to remove the final filter, it stays in the url, and casts an error:

Uncaught TypeError: Cannot read property 'join' of undefined
    at HTMLInputElement.<anonymous> (677)
    at HTMLInputElement.dispatch (jquery.min.js:3)
    at HTMLInputElement.q.handle (jquery.min.js:3)

Second, the code only works when I use one filter group. If I try to click a checkbox from another filter group while a selection is already made from the first, for instance if colors=red,black are already selected, things fail, and for obvious reasons, because the code doesn't seem to allow it.

How can this be modified to add multiple query groups? How can I click red and black from my colors group and small and medium from my sizes group and have the url display:

http://ift.tt/2pnmUUs

But also remove the actual query if I don't want to specify colors for instance?

http://ift.tt/2pEjcc6