Update url without reloading depending on the checkbox(es) selected using jquery/javascript

This is a 2 part question:

I have 2 sections with checkboxes.

1. I need to update the url depending on the checkbox(es) selected
2. I need to share the updated url which opens up with the specific checkbox(es) selected when page loads

I have made a jsfiddle with the html code in it: http://ift.tt/1WKiFha

<h3>Filter recepies:</h3>

<div>
<p>Select vegetables</p>
<label><input type="checkbox" id="cbox1" value="potato"> Potato</label><br>
<label><input type="checkbox" id="cbox2" value="onion"> Onion</label><br>
<label><input type="checkbox" id="cbox3" value="tomato"> Tomato</label><br>
</div>

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