title: Write and read from URL in jQuery element filter
body: <p>I have got jQuery function (thanks to @CarstenLøvboAndersen again) for filtering elements.
  For example: If I check RED and BLUE then it filter only elements with both class RED and BLUE. When I click all, script uncheck all checkboxes and show all elements.</p>
  <p>I need to improve the function with the possibility of saving parameters in the URL and reading them again.</p>
  <p>Simply said: I need link page with filter's parameters</p>
  <p>Any idea how to do it... Thank you in advance</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.selector button').click(function() {
    $('.selector input').prop("checked", false).trigger("change");
  });
  
  $('.selector input').change(function() {
    var classes = "";
    $(".filterelements div").hide();
    $(".selector input:checked").each(function() {
      classes += "." + $(this).val();
    });
    $(".filterelements div"+classes).show();
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.filterelements {
    width: 210px;
  }
  
  .red,
  .green,
  .blue,
  .redgreen,
  .redblue {
    width: 50px;
    height: 50px;
    float: left;
    margin: 10px;
  }
  
  .red {
    background: #ff2600;
  }
  
  .green {
    background: #a5de00;
  }
  
  .blue {
    background: #0087ff;
  }
  
  .redgreen {
    background: rgb(255, 38, 0);
    background: linear-gradient(90deg, rgba(255, 38, 0, 1) 0%, rgba(165, 222, 0, 1) 100%);
  }
  
  .redblue {
    background: rgb(255, 38, 0);
    background: linear-gradient(90deg, rgba(255, 38, 0, 1) 0%, rgba(0, 135, 255, 1) 100%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
  
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;&lt;/title&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div class="selector"&gt;
        &lt;button type="button" name="all"&gt;Show all&lt;/button&gt;
        &lt;input type="checkbox" name="red" value="red"&gt;red
        &lt;input type="checkbox" name="blue" value="blue"&gt;blue
        &lt;input type="checkbox" name="green" value="green"&gt;green
      &lt;/div&gt;
  
  
  
      &lt;hr /&gt;
      &lt;div class="filterelements"&gt;
        &lt;div class="red" rel="color:red"&gt;&lt;/div&gt;
        &lt;div class="green" rel="color:green"&gt;&lt;/div&gt;
        &lt;div class="blue" rel="color:blue"&gt;&lt;/div&gt;
        &lt;div class="redgreen red green" rel="color:red|color:green"&gt;&lt;/div&gt;
        &lt;div class="green" rel="color:green"&gt;&lt;/div&gt;
        &lt;div class="red" rel="color:red"&gt;&lt;/div&gt;
        &lt;div class="redblue red blue" rel="color:red|color:blue"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>