单选按钮添加url参数

Question

我正在尝试添加url参数，例如（www.example.com/product#green）这个，但我需要多个参数（例如www.example.com/product#green#large）后第一个参数添加大小我写了一些东西但它没有正常工作。但是当用户选择尺寸时，首先应该按参数。当用户点击颜色然后调整尺寸www.example.com/product#green#large

当我刷新页面时，我有另一个问题，参数留在那里。我需要清除url参数。我在下面添加了jsFiddle链接。

我如何用jquery做到这一点。

＆＃13;

＆＃13;

var currentUrl = window.location.href;

$("#colour-stage label").click(function() {
  var valColourInput = $('input[name=colour]:checked').val();
  document.location.href = currentUrl + '#' + valColourInput;
});

$("#size-stage label").click(function() {
  var valSizeInput = $('input[name=size]:checked').val();
  document.location.href = currentUrl + '#' + valSizeInput;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="get">

  <fieldset id="colour-stage">
    <legend>
      Colours:
    </legend>
    <label>
      <input type="radio" name="colour" value="Red">
      <span>Red</span>
    </label>
    <label>
      <input type="radio" name="colour" value="Blue">
      <span>Blue</span>
    </label>
    <label>
      <input type="radio" name="colour" value="Yellow">
      <span>Yellow</span>
    </label>
    <label>
      <input type="radio" name="colour" value="Green">
      <span>Green</span>
    </label>
  </fieldset>
  <fieldset id="size-stage">
    <legend>
      Size:
    </legend>
    <label>
      <input type="radio" name="size" value="Small">
      <span>Small</span>
    </label>
    <label>
      <input type="radio" name="size" value="medium">
      <span>Medium</span>
    </label>
    <label>
      <input type="radio" name="size" value="large">
      <span>Large</span>
    </label>
  </fieldset>
</form>

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/tolga748/06ekvf72/