Linked Semantic UI checkboxes won't uncheck when onChange is set to anchor links

I'm using Semantic UI checkboxes as an element in an ecommerce filter design. I want users to be able to check a field and than have that section scroll to them (the checkbox area is fixed). I've got this working once, but the checkboxes won't uncheck.

I've linked the checkboxes to anchor links on the page using onChange="if(this.checked)...

<div class="group-checkboxes grouped fields">
  <div class="field">
    <div class="ui checkbox">
      <input type="radio" name="legacy" id="ch-legacy" onchange="if(this.checked) document.location.href='#product-legacy';" />
      <label for="ch-legacy">Legacy</label>
    </div>
  </div>
  <div class="field">
    <div class="ui checkbox">
      <input type="radio" name="reserve" id="ch-reserve" onchange="if(this.checked) document.location.href='#product-reserve';" />
      <label for="ch-reserve">Proprietor's Reserve</label>
    </div>
  </div>
  <div class="field">
    <div class="ui checkbox">
      <input type="radio" name="gifts" id="ch-gifts" onchange="if(this.checked) document.location.href='#product-gifts';" >
      <label for="ch-gifts">Gifts</label>
    </div>
  </div>
  <div class="field">
    <div class="ui checkbox">
      <input type="radio" name="sundries" id="ch-sundries" onchange="if(this.checked) document.location.href='#product-gifts';" >
      <label for="ch-sundries">Grocery & Sundry</label>
    </div>
  </div>
</div>

I expected each checkbox's onChange to override the next, but they're not — if all checkboxes are checked, the user is stuck.

I'm not sure if I should try to somehow untoggle the checkboxes when the next box is checked, or if I should try something different instead of onChange.