Semantic UI Radio Buttons do not check when clicking the label

Question

As the title says, the radio buttons do not check when the label (tex) is clicked. However this seems to work fine on Semantic's site.

Semantic UI Documentation with working radio buttons: http://semantic-ui.com/modules/checkbox.html

The following example code is straight from the Semantic UI Documentation above:

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="ui form">
  <div class="grouped fields">
    <label>How often do you use checkboxes?</label>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2" checked="checked">
        <label>Once a week</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2">
        <label>2-3 times a week</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2">
        <label>Once a day</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2">
        <label>Twice a day</label>
      </div>
    </div>
  </div>
</div>

How can I fix this?

Edit: Apparently I need some javascript for the radio buttons as is mentioned here: http://semantic-ui.com/modules/checkbox.html#/usage. I'm having trouble finding the minimum required code for a working radio button/checkbox though.

Answer 1

I needed $('.ui.checkbox').checkbox(); in my Javascript.

Answer 2

If you want to check radio buttons clicking to label, you have to use id for input field and for for label:

<div class="ui form">
  <div class="grouped fields">
    <label>How often do you use checkboxes?</label>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2" checked="checked" id="100">
        <label for="100">Once a week</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2" id="101">
        <label for="101">2-3 times a week</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2" id="102">
        <label for="102">Once a day</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2" id="103">
        <label for="103">Twice a day</label>
      </div>
    </div>
  </div>
</div>

jsfiddle-link

of course, you can use your own id and for names, but all values must be unique!