無法切換類

Question

所以我的目標是有能力切換輸入與我創建的自定義複選框。現在我有工作，但是，它只是增加了全班第一個孩子（選項1）以下 enter image description here

查看圖像。當我點擊選項2和三個默認的複選框仍然顯示

enter image description here

我試過使用document.querySelectorAll，並且不起作用。

這裏是到Codepen 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

Answer 1

的第一件事情，一個id是一個獨特的Id entifier，你想申請一個類到你的複選框或選擇他們的類型或一些其他類似的方法可用於選擇多個（querySelectorAll）

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

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

• 通過您的分隔符，選擇所有複選框
• 遍歷複選框
• 在每次迭代中，你設置你需要的動作，你會申請一個單擊處理
• 裏面點擊處理程序。