Radio Button as Tab (Bootstrap 3)

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div role="tabpanel">
  <ul class="nav nav-tabs" role="tablist">

    <li role="tab" class="active">
      <label data-target="#scheduleDaily">
        <input id="optDaily" name="intervaltype" type="radio" checked />
        
      </label>
    </li>

    <li role="tab">
      <label data-target="#scheduleWeekly">
        <input id="optWeekly" name="intervaltype" type="radio" />
        
      </label>
    </li>

    <li role="tab">
      <label data-target="#scheduleMonthly">
        <input id="optMontly" name="intervaltype" type="radio" />
        Monthly
      </label>
    </li>

  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="scheduleDaily">
      <h3>Daily content...</h3>
    </div>

    <div role="tabpanel" class="tab-pane" id="scheduleWeekly">
      <h3>Weekly content...</h3>
    </div>

    <div role="tabpanel" class="tab-pane" id="scheduleMonthly">
      <h3>Monthly content...</h3>
    </div>
  </div>

</div>

CSS

body {
  padding: 1em;
}

/* Mimic Bootstrap's .nav-tabs>li(.active)>a 
when using radio buttons instead of links in tab headers */
>li>label {
  margin-right: 2px;
  line-height: 1.42857143;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
}

.nav>li>label {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: 0
}

.nav-tabs>li>label:hover {
  border-color: #eee #eee #ddd;
}

.nav>li>label:focus, .nav>li>label:hover {
  text-decoration: none;
  background-color: #eee;
}

.nav-tabs>li.active>label, .nav-tabs>li.active>label:focus, .nav-tabs>li.active>label:hover {
  color: #555;
  cursor: default;
  background-color: #fff;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
}

JavaScript

$('input[name="intervaltype"]').click(function () {
    //jQuery handles UI toggling correctly when we apply "data-target" attributes and call .tab('show') 
    //on the <li> elements' immediate children, e.g the <label> elements:
    $(this).closest('label').tab('show');
});