title: Generate url with checked checkbox
body: <p>I have a form with different features </p>
  
  <pre><code>&lt;form name="filter" action= method="get"&gt;
  &lt;input type=checkbox name="color" value="red"&gt;Red&lt;br&gt;
  &lt;input type=checkbox name="color" value="blue"&gt;Blue&lt;br&gt;
  &lt;input type=checkbox name="color" value="white"&gt;White&lt;br&gt;
  
  &lt;input type=checkbox name="size" value="small"&gt;Small&lt;br&gt;
  &lt;input type=checkbox name="size" value="medium"&gt;Medium&lt;br&gt;
  &lt;input type=checkbox name="size" value="large"&gt;Large&lt;br&gt;
  
  ...
  &lt;/form&gt;
  </code></pre>
  
  <p>I need to generate a link with url like this:</p>
  
  <pre><code>if red is checked &gt; http://example.com/products?color=red
  if red and blue are checked &gt; http://example.com/products?color=red,blue
  if red blue and small are checked &gt; http://example.com/products?color=red,blue&amp;size=small
  </code></pre>
  
  <p>And after, in the link page, mark as checked the input in link</p>
  
  <pre><code>in http://example.com/products?color=red &gt; red input is checked
  </code></pre>
  
  <p>Thanks for help!</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>This is a script to generate url by input value, but doesn't work with different input name <a href="https://jsfiddle.net/y2b7t35o/" rel="nofollow noreferrer">JSFIDDLE</a></p>
  
  <pre><code>&lt;span class="link"&gt;&lt;/span&gt;
  
  $("input[type=checkbox]").on("change", function(){
      var arr = []
      $(":checkbox").each(function(){
         if($(this).is(":checked")){
           arr.push($(this).val())
         }
      })
      var vals = arr.join(",")
    var name = $(this).attr('name')
      var str = "http://example.com/products?" + name + "=" + vals
      console.log(str);
  
    if (vals.length &gt; 0) {
      $('.link').html($('&lt;a&gt;', {
        href: str,
        text: str
      }));
    } else {
      $('.link').html('');
    }  
  })
  </code></pre>