Update url without reloading depending on the checkbox(es) selected using jquery/javascript
<p>This is a 2 part question:</p>

<p>I have 2 sections with checkboxes.</p>

<ol>
<li>I need to update the url depending on the checkbox(es) selected</li>
<li>I need to share the updated url which opens up with the specific checkbox(es) selected when page loads</li>
</ol>

<p>I have made a jsfiddle with the html code in it: <a href="https://jsfiddle.net/yh2ugbj8/5/" rel="nofollow">https://jsfiddle.net/yh2ugbj8/5/</a></p>

<pre><code>&lt;h3&gt;Filter recepies:&lt;/h3&gt;

&lt;div&gt;
&lt;p&gt;Select vegetables&lt;/p&gt;
&lt;label&gt;&lt;input type="checkbox" id="cbox1" value="potato"&gt; Potato&lt;/label&gt;&lt;br&gt;
&lt;label&gt;&lt;input type="checkbox" id="cbox2" value="onion"&gt; Onion&lt;/label&gt;&lt;br&gt;
&lt;label&gt;&lt;input type="checkbox" id="cbox3" value="tomato"&gt; Tomato&lt;/label&gt;&lt;br&gt;
&lt;/div&gt;

&lt;div&gt;
&lt;p&gt;Select seasoning&lt;/p&gt;
&lt;label&gt;&lt;input type="checkbox" id="cbox1" value="salt"&gt; Salt&lt;/label&gt;&lt;br&gt;
&lt;label&gt;&lt;input type="checkbox" id="cbox2" value="pepper"&gt; Pepper&lt;/label&gt;&lt;br&gt;
&lt;label&gt;&lt;input type="checkbox" id="cbox3" value="chilli"&gt; Chilli Flakes&lt;/label&gt;&lt;br&gt;
&lt;/div&gt;
</code></pre>