title: Filtering with checkboxes using jQuery - preserve the selections in the URL
body: <p>I have used an <a href="https://stackoverflow.com/questions/22786090/jquery-multiple-checkbox-filtering">earlier post</a> and with success implemented this as a 2-dimensional product viewer with filtering.</p>
  
  <p>As I really appreciate the people developing and sharing this code. </p>
  
  <p>I would like it to be possible for the selections to be preserved when clicking back from a product? Maybe it's possible to get the selections showed as variables in the URL when a checkbox is checked, so in that way you can click back to the same selection?</p>
  
  <p>Another thing, I have tried to add a series of radio buttons, that has nothing to do with the actual checkboxes or jQuery, but for some reason the jQuery reacts to the radio buttons when clicked. Are there any way to "disable" this? Even if the radio buttons are untouched, when filtering with the existing checkboxes, it behaves wrongly by hiding everything when supposed to show everything.</p>
  
  <pre><code>    &lt;div class="flowers-wrap"&gt;
      &lt;p style="font-size:12px;"&gt;&lt;strong&gt;Filter flowers by colour:&lt;/strong&gt;
      &lt;/p&gt;
      &lt;form&gt;
          &lt;label style="font-size:12px;"&gt;
              &lt;input type="checkbox" name="fl-colour" id="1" /&gt;Kartofler&lt;/label&gt;
          &lt;br&gt;
          &lt;label style="font-size:12px;"&gt;
              &lt;input type="checkbox" name="fl-colour" id="2" /&gt;Gulerødder&lt;/label&gt;
          &lt;br&gt;
          &lt;label style="font-size:12px;"&gt;
              &lt;input type="checkbox" name="fl-colour" id="3" /&gt;Løg&lt;/label&gt;
          &lt;br&gt;
          &lt;label style="font-size:12px;"&gt;
              &lt;input type="checkbox" name="fl-colour" id="4" /&gt;Agurker&lt;/label&gt;
          &lt;br&gt;
          &lt;label style="font-size:12px;"&gt;
              &lt;input type="checkbox" name="fl-colour" id="5" /&gt;Peber&lt;/label&gt;
          &lt;br&gt;
          &lt;label style="font-size:12px;"&gt;
              &lt;input type="checkbox" name="fl-colour" id="6" /&gt;Rødbeder&lt;/label&gt;
          &lt;br&gt;
          &lt;label style="font-size:12px;"&gt;
              &lt;input type="checkbox" name="fl-colour" id="7" /&gt;Selleri&lt;/label&gt;
          &lt;br&gt;
          &lt;label style="font-size:12px;"&gt;
              &lt;input type="checkbox" name="fl-colour" id="8" /&gt;Andre&lt;/label&gt;
          &lt;br&gt;
          &lt;label style="font-size:12px;"&gt;
              &lt;input type="checkbox" name="fl-colour" id="9" /&gt;Salat&lt;/label&gt;
          &lt;br&gt;
          &lt;label style="font-size:12px;"&gt;
              &lt;input type="checkbox" name="fl-colour" id="12" /&gt;Emballage&lt;/label&gt;
          &lt;br&gt;
      &lt;/form&gt;
      &lt;p style="font-size:12px;"&gt;&lt;strong&gt;Filter flowers by size:&lt;/strong&gt;
      &lt;/p&gt;
      &lt;form&gt;
          &lt;label style="font-size:12px;"&gt;
              &lt;input type="checkbox" name="fl-size" id="t10" /&gt;Frasortering - sten/grus&lt;/label&gt;
          &lt;br&gt;
          &lt;label style="font-size:12px;"&gt;
              &lt;input type="checkbox" name="fl-size" id="t11" /&gt;Vaske&lt;/label&gt;
          &lt;br&gt;
          &lt;label style="font-size:12px;"&gt;
              &lt;input type="checkbox" name="fl-size" id="t12" /&gt;Polere&lt;/label&gt;
          &lt;br&gt;
          &lt;label style="font-size:12px;"&gt;
              &lt;input type="checkbox" name="fl-size" id="t13" /&gt;Tørre&lt;/label&gt;
          &lt;br&gt;
          &lt;label style="font-size:12px;"&gt;
              &lt;input type="checkbox" name="fl-size" id="t14" /&gt;Sortering&lt;/label&gt;
          &lt;br&gt;
          &lt;label style="font-size:12px;"&gt;
              &lt;input type="checkbox" name="fl-size" id="t15" /&gt;Skrælle&lt;/label&gt;
          &lt;br&gt;
          &lt;label style="font-size:12px;"&gt;
              &lt;input type="checkbox" name="fl-size" id="t16" /&gt;Skære&lt;/label&gt;
          &lt;br&gt;
          &lt;label style="font-size:12px;"&gt;
              &lt;input type="checkbox" name="fl-size" id="t17" /&gt;Transport&lt;/label&gt;
          &lt;br&gt;
          &lt;label style="font-size:12px;"&gt;
              &lt;input type="checkbox" name="fl-size" id="t18" /&gt;Veje/tælle&lt;/label&gt;
          &lt;br&gt;
          &lt;label style="font-size:12px;"&gt;
              &lt;input type="checkbox" name="fl-size" id="t19" /&gt;Pakke/fylde&lt;/label&gt;
          &lt;br&gt;
          &lt;label style="font-size:12px;"&gt;
              &lt;input type="checkbox" name="fl-size" id="t21" /&gt;Storkøkken&lt;/label&gt;
          &lt;br&gt;
          &lt;label style="font-size:12px;"&gt;
              &lt;input type="checkbox" name="fl-size" id="t22" /&gt;Palletering&lt;/label&gt;
          &lt;br&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;div class="flowers"&gt;
      &lt;div class="flower" data-id="3-Dimensionel skiveskærermaskine" data-category="8 5 3 2 1 t16 "&gt;3-Dimensionel skiveskærermaskine&lt;/div&gt;
      &lt;div class="flower" data-id="3D-skærer til Sticks og tern" data-category="9 8 7 6 5 4 3 2 1 t16 "&gt;3D-skærer til Sticks og tern&lt;/div&gt;
      &lt;div class="flower" data-id="Automatisk gulerodsskærer og slicer" data-category="2 t16 "&gt;Automatisk gulerodsskærer og slicer&lt;/div&gt;
      &lt;div class="flower" data-id="Automatisk gulerodsskærer og slicer" data-category="2 t16 "&gt;Automatisk gulerodsskærer og slicer&lt;/div&gt;
      &lt;div class="flower" data-id="Automatisk kassefylder" data-category="9 8 7 6 5 4 3 2 1 t17 t19 "&gt;Automatisk kassefylder&lt;/div&gt;
      &lt;div class="flower" data-id="Automatisk løgskræller USM-100A" data-category="3 t15 "&gt;Automatisk løgskræller USM-100A&lt;/div&gt;
      &lt;div class="flower" data-id="Automatisk Pallelaster" data-category="12 t22 "&gt;Automatisk Pallelaster&lt;/div&gt;
      &lt;div class="flower" data-id="Automatisk strapmaskine incl. påsætning af hjørnebeskytter" data-category="12 t22 "&gt;Automatisk strapmaskine incl. påsætning af hjørnebeskytter&lt;/div&gt;
      &lt;div class="flower" data-id="Automatisk Vejemaskine" data-category="3 1 t18 "&gt;Automatisk Vejemaskine&lt;/div&gt;
      &lt;div class="flower" data-id="Basisenhed for manuel udskæring" data-category="9 8 7 6 5 4 3 2 1 t16 "&gt;Basisenhed&lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>       var byProperty = [],
         byColor = [];
  
     $("input[name=fl-colour]").on("change", function () {
         if (this.checked) byProperty.push("[data-category~='" + $(this).attr("value") + "']");
         else removeA(byProperty, "[data-category~='" + $(this).attr("value") + "']");
     });
  
     $("input[name=fl-size]").on("change", function () {
         if (this.checked) byColor.push("[data-category~='" + $(this).attr("value") + "']");
         else removeA(byColor, "[data-category~='" + $(this).attr("value") + "']");
     });
  
  
     $("input").on("change", function () {
         var str = "Include items \n";
         var selector = '',
             cselector = '',
             nselector = '';
  
         var $lis = $('.flowers &gt; div'),
             $checked = $('input:checked');
  
         if ($checked.length) {
  
             if (byProperty.length) {
                 if (str == "Include items \n") {
                     str += "    " + "with (" + byProperty.join(',') + ")\n";
                     $($('input[name=fl-colour]:checked')).each(function (index, byProperty) {
                         if (selector === '') {
                             selector += "[data-category~='" + byProperty.id + "']";
                         } else {
                             selector += ",[data-category~='" + byProperty.id + "']";
                         }
                     });
                 } else {
                     str += "    AND " + "with (" + byProperty.join(' OR ') + ")\n";
                     $($('input[name=fl-size]:checked')).each(function (index, byProperty) {
                         selector += "[data-category~='" + byProperty.id + "']";
                     });
                 }
             }
  
             if (byColor.length) {
                 if (str == "Include items \n") {
                     str += "    " + "with (" + byColor.join(' OR ') + ")\n";
                     $($('input[name=fl-size]:checked')).each(function (index, byColor) {
                         if (selector === '') {
                             selector += "[data-category~='" + byColor.id + "']";
                         } else {
                             selector += ",[data-category~='" + byColor.id + "']";
                         }
                     });
                 } else {
                     str += "    AND " + "with (" + byColor.join(' OR ') + ")\n";
                     $($('input[name=fl-size]:checked')).each(function (index, byColor) {
                         if (cselector === '') {
                             cselector += "[data-category~='" + byColor.id + "']";
                         } else {
                             cselector += ",[data-category~='" + byColor.id + "']";
                         }
                     });
                 }
             }
  
  
  
             $lis.hide();
             console.log(selector);
             console.log(cselector);
             console.log(nselector);
  
             if (cselector === '' &amp;&amp; nselector === '') {
                 $('.flowers &gt; div').filter(selector).show();
             } else if (cselector === '') {
                 $('.flowers &gt; div').filter(selector).filter(nselector).show();
             } else if (nselector === '') {
                 $('.flowers &gt; div').filter(selector).filter(cselector).show();
             } else {
                 $('.flowers &gt; div').filter(selector).filter(cselector).filter(nselector).show();
             }
  
         } else {
             $lis.show();
         }
  
         $("#result").html(str);
  
      });
      function removeA(arr) {
         var what, a = arguments,
             L = a.length,
             ax;
         while (L &gt; 1 &amp;&amp; arr.length) {
             what = a[--L];
             while ((ax = arr.indexOf(what)) !== -1) {
                 arr.splice(ax, 1);
             }
         }
         return arr;
      }
  </code></pre>
  
  <p>I fiddled the code <a href="http://jsfiddle.net/azR83/4/" rel="nofollow noreferrer">here</a>.</p>
  
  <p>I thank you all in advance :-)</p>