title: Woocommerce Ajax Filters with checkboxes
body: <p>I have structure like this</p>
  
  <p><strong>Brand</strong></p>
  
  <ol>
  <li>Google</li>
  <li>Apple</li>
  <li>Microsoft</li>
  </ol>
  
  <p><strong>Material</strong></p>
  
  <ol>
  <li>Wood</li>
  <li>Metal</li>
  <li>Plastik</li>
  </ol>
  
  <p>Basically Brand &amp; Material - are Woocomerce attributes and the rest are variables.</p>
  
  <p>I'm working on ajax filters right now and I need url to look like this</p>
  
  <p><a href="http://example.com/shop?filter_brand=122,123&amp;filter_material=134,45" rel="nofollow">http://example.com/shop?filter_brand=122,123&amp;filter_material=134,45</a>.</p>
  
  <p>Here is, what I have so far this <a href="https://jsfiddle.net/v8mgy4bd/141/" rel="nofollow">code</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul class="dd" data-termik="men"&gt;
      &lt;li&gt;
          &lt;label for=""&gt;Men&lt;/label&gt;
          &lt;input class="ajax-checkbox" data-term="men" data-id="31" type="checkbox"&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;label for=""&gt;Boys&lt;/label&gt;
          &lt;input class="ajax-checkbox" data-term="men" data-id="54" type="checkbox"&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;label for=""&gt;Robots&lt;/label&gt;
          &lt;input class="ajax-checkbox" data-term="men" data-id="76" type="checkbox"&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;hr&gt;
  
  &lt;ul class="dd" data-termik="women"&gt;
      &lt;li&gt;
          &lt;label for=""&gt;Women&lt;/label&gt;
          &lt;input class="ajax-checkbox" data-term="women" data-id="12" type="checkbox"&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;label for=""&gt;Girls&lt;/label&gt;
          &lt;input class="ajax-checkbox" data-term="women" data-id="38" type="checkbox"&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;label for=""&gt;Barbies&lt;/label&gt;
          &lt;input class="ajax-checkbox" data-term="women" data-id="19" type="checkbox"&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(document).on('change', '.ajax-checkbox', function(e) {
  
      var str = $(".ajax-checkbox:checked").map(function() {
          var term = $(this).data('term');
  
          var term_ids = [];
          $('.ajax-checkbox:checked').each(function(index, value) {
              var term_id = $(this).data('id');
              term_ids.push(term_id);
          });
          term_ids_unique = $.unique(term_ids);
  
          return term + '=' + term_ids_unique;
  
      }).get();
  
      var uniqueArray = str.filter(function(elem, pos) {
          return str.indexOf(elem) == pos;
      });
  
  
      // FINAL URL
      var final_url = uniqueArray;
      console.log(final_url);
  
  });
  </code></pre>
  
  <p>but it doesn't work correct.</p>