Which is better for CSS states: checkbox or javascript?

Using a hidden checkbox to create styles with states, for instance when animating dropdowns, custom checkboxes, etc, is a very popular trick. It's also very easy to do the same using javascript. Are there any fallbacks in either strategy? I'm looking for differences in performance, rendering/repaining/reflow, compatibility, code standards/SEO, etc.

function toggle() {
  var cb = document.getElementById('checkbox-js');
  if (cb.className === 'checkbox') {
    cb.className = "checkbox checked";
  } else {
    cb.className = "checkbox";
  }
}

input[type="checkbox"] {

  display: none;

}

.checkbox {

  display: inline-block;

  font-size: 20px;

  border: 1px solid #AAA;

  width: 32px;

  height: 32px;

  line-height: 32px;

  vertical-align: middle;

}

.checkbox:before {

  width: 32px;

  height: 32px;

  content: "x";

  color: white;

  text-align: center;

  display: inline-block;

}

input[type="checkbox"]:checked + .checkbox:before {

  color: #333;

}

.checkbox.checked:before {

  color: #333;

}

<div class="css-only">
  <label>
    CSS Only:
    <input placeholder="Name" type="checkbox" />
    <span class="checkbox"></span>
  </label>
</div>
<br>
<br>
<br>
<div class="with-js">
  <label>
    With JS:
    <span onClick="toggle()" class="checkbox" id="checkbox-js"></span>
  </label>
</div>