title: jQuery add multiple filter parameters to url
body: <p>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...</p>
  
  <p>The url for this example would look like the following, after a search is made, and the filters are applied:</p>
  
  <pre><code>www.xzy.dev/search?keywords=shirt&amp;colors=red,black&amp;sizes=small,medium
  </code></pre>
  
  <p>This would return me all items that match the keyword search, with the filters of colors (red and black), and sizes (small and medium).</p>
  
  <p>I have all of the backend done, but I am not very great when it comes to the front end of things...</p>
  
  <p>The code below does just about what I want, except it has it's flaws for my situation which I've explained below.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
        function GetFilters() {
            console.log("rom");
            $('input[type="checkbox"]').on('change', function (e) {
                var data = {},
                    fdata = [],
                    loc = $('&lt;a&gt;', { 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": "{{ csrf_token() }}",
                        "fdata": fdata
                      },
                  success: function (response) {
                    $('#d2d-results').html(response);
                  }
                });
                if (history.pushState) {
                    history.pushState(null, null, loc.pathname + '?' + fdata);
                }
            });
        }
        window.onload = GetFilters;
    &lt;/script&gt;
  </code></pre>
  
  <p>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...</p>
  
  <p>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:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'join' of undefined
      at HTMLInputElement.&lt;anonymous&gt; (677)
      at HTMLInputElement.dispatch (jquery.min.js:3)
      at HTMLInputElement.q.handle (jquery.min.js:3)
  </code></pre>
  
  <p>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.</p>
  
  <p>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:</p>
  
  <pre><code>www.xzy.dev/search?keywords=shirt&amp;colors=red,black&amp;sizes=small,medium
  </code></pre>
  
  <p>But also remove the actual query if I don't want to specify colors for instance?</p>
  
  <pre><code>www.xzy.dev/search?keywords=shirt&amp;sizes=small,medium
  </code></pre>