Semantic Ui reset issue

Semantic Ui reset issue

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">
<div class="gtrgrt">
  <div class="grouped fields">
    <label>Outbound Throughput</label>
    <div class="field">
      <div class="ui slider checkbox">
        <input name="throughput" checked="checked" type="radio">
        <label>20 mbps max</label>
      </div>
    </div>
    <div class="field">
      <div class="ui slider checkbox">
        <input name="throughput" type="radio">
        <label>10mbps max</label>
      </div>
    </div>
    <div class="field">
      <div class="ui slider checkbox">
        <input name="throughput" type="radio">
        <label>5mbps max</label>
      </div>
    </div>
    <div class="field">
      <div class="ui slider checkbox checked">
        <input name="throughput" type="radio">
        <label>Unmetered</label>
      </div>
    </div>
  </div>
</div>

First press clear 
<button class="ui clear button">
clear
</button>

<br><br>
this button doesn't do anything
<button class="ui reset button">
reset
</button>


<br><br>
this button doesn't do anything
<button class="ui default button">
defaults
</button>

CSS

body { margin : 20px; }

JavaScript

$('.ui.clear.button').on('click', function(){
  $('.gtrgrt').form('clear');
});


$('.ui.reset.button').on('click', function(){
  $('.gtrgrt').form('reset'); 
});


$('.ui.default.button').on('click', function(){
  $('.gtrgrt').form('set defaults'); 
});