Флажок не активен при клике, но панель появляется

Question

https://jsfiddle.net/joel081112/18p0ca5u/13/

Это мой проект jsfiddle tester. У меня есть панель, загружаемая при нажатии на гамбургер из класса js-cd-panel-trigger, однако она не устанавливает флажок и не позволяет событию анимации произойти. В тот момент, если я уберу это имя класса, событие произойдет без появления панели.

Как я могу изменить свой js, чтобы сделать флажки true и false, при этом позволяя панелипоявляются? Предупреждения показывают функцию флажка, когда класс js-cd-panel-trigger отсутствует.

var checkbox = document.getElementById('myCheck');
checkbox.onclick = function () {
if (this.checked) {
  alert('hi');
} else {
  alert('well well');
}
};

(function() {
  var panelTriggers = document.getElementsByClassName('js-cd-panel-trigger');
  if (panelTriggers.length > 0) {
    for (var i = 0; i < panelTriggers.length; i++) {
      (function(i) {
        var panelClass = 'js-cd-panel-' + panelTriggers[i].getAttribute('data-panel'),
          panel = document.getElementsByClassName(panelClass)[0];
        // open panel when clicking on trigger btn
        panelTriggers[i].addEventListener('click', function(event) {
          event.preventDefault();
          addClass(panel, 'cd-panel--is-visible');
        });
        //close panel when clicking on 'x' or outside the panel
        panel.addEventListener('click', function(event) {
          if (hasClass(event.target, 'js-cd-close') || hasClass(event.target, panelClass)) {
            event.preventDefault();
            removeClass(panel, 'cd-panel--is-visible');
          }
        });
      })(i);
    }
  }

<div class="hamburger">
  <label class="toggle js-cd-panel-trigger" id="menuDisplay" data-panel="main">
    <input type="checkbox" id="myCheck">
    <div>
      <div>
        <span></span>
        <span></span>
      </div>
      <svg>
        <use xlink:href="#path">
      </svg>
      <svg>
        <use xlink:href="#path">
      </svg>
    </div>
  </label>


  <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" id="path">
      <path d="M22,22 L2,22 C2,11 11,2 22,2 C33,2 42,11 42,22"></path>
    </symbol>
  </svg>

</div>

Я попытался поставить переключатель в разных местах кода, чтобы они не работали правильно. ,