Avoir de la difficulté à basculer en classe

Question

Mon objectif est donc d'avoir la possibilité de pouvoir basculer l'entrée avec la case à cocher personnalisée que j'ai créée. En ce moment, je l'ai travail, cependant, il ajoute que la classe au premier enfant (option 1)

Voir image ci-dessous enter image description here

Lorsque je clique sur l'option 2 et trois la case à cocher par défaut apparaît toujours

enter image description here

J'ai essayé d'utiliser document.querySelectorAll et cela ne fonctionne pas.

Voici un lien vers la Codepen codepen.io/Brushel/pen/QqLgyZ

Voici le code:

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

La première chose, un identifiant est unique Id éntifier, vous voulez appliquer une classe à vos cases ou les sélectionner par leur type ou une autre méthode similaire utile pour sélectionner plusieurs (querySelectorAll)

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

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

• Cochez toutes les cases de votre delimiter
• itérer sur les cases à cocher
• Dans chaque itération, vous appliquez un gestionnaire de clic
• l'intérieur du gestionnaire de clic est l'endroit où vous définissez vos actions requises.