javascript - クラスの切り替えに問題がある

Question

したがって、私の目標は、作成したカスタムチェックボックスで入力を切り替えることができるようにすることです。現在、私はそれを機能させていますが、最初の子にクラスを追加するだけです (オプション 1)

下の画像を参照してください ここに画像の説明を入力してください

オプション 2 と 3 をクリックすると、デフォルトのチェックボックスが引き続き表示されます

ここに画像の説明を入力

document.querySelectorAll を使用してみましたが、うまくいきません。

コードペン codepen.io/Brushel/pen/QqLgyZ へのリンクは次のとおりです。

コードは次のとおりです。

checkbox = document.getElementById('checkbox')

checkbox.addEventListener 'click', (event) ->
  event.preventDefault()
  document.querySelector('input').classList.toggle 'checkmark'
  
  

:root {
  --main-color: seagreen;
  --secondary-color: white;
}

body {
  background: var(--secondary-color);
  display: flex;
  justify-content: center;
}

ul {
  list-style: none;
  font-size: 1em;
}

.checkmark {
  display: inline-block;
    &:after {
      content: '';
      display: block;
      width: 6px;
      height: 12px;
      border: solid seagreen;
      border-width: 0 4px 4px 0;
      transform: rotate(45deg);
    }
}

%body
  %ul
    %li
      %input#checkbox(type="checkbox")/
      %label(for="checkbox") Option 1
    %li
      %input#checkbox(type="checkbox")/
      %label(for="checkbox") Option 2
    %li
      %input#checkbox(type="checkbox")/
      %label(for="checkbox") Option 3