クラスの切り替えに問題があります

Question

私の目標は、作成したカスタムチェックボックスで入力を切り替えることができるようにすることです。今、私はそれが働いていたが、それが唯一の最初の子（オプション1）にクラスを追加し

は、私はオプション2と3をクリックすると画像が

enter image description here の下に、デフォルトのチェックボックスがまだ

を示して参照してください。

enter image description here

私はdocument.querySelectorAllを使用してみました、それは動作しません。 、IDが一意

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

Answer 1

最初のものである：ここでは

はここCodepen codepen.io/Brushel/pen/QqLgyZ

へのリンクがコードされていますIdエンティティを使用する場合は、チェックボックスにクラスを適用するか、タイプを選択するか、複数の選択に便利なその他の方法（querySelectorAll）

const checkboxHandler = checkbox => { 
    checkbox.addEventListener('click', event => { 
     event.preventDefault(); 
     checkbox.classList.toggle('checkmark'); 
    }) 
}; 

let checkboxes = document.querySelectorAll('.checkbox') 
checkboxes.forEach(checkboxHandler); 

• あなたはクリックハンドラの内部でクリックハンドラ
• を適用する各反復でチェックボックス
• の上に区切り
• 反復することにより、すべてのチェックボックスを選択し、あなたの必要なアクションを設定する場所です。