切换课程时遇到问题答案

【问题标题】：Having trouble toggling class切换课程时遇到问题
【发布时间】：2017-09-11 17:26:31
【问题描述】：

所以我的目标是能够使用我创建的自定义复选框切换输入。现在我让它工作了，但是，它只将类添加到第一个孩子（选项 1）

当我点击选项 2 和 3 时，默认复选框仍然显示

我尝试过使用 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

【问题讨论】：

ids 是单数的，你不能有多个具有相同 id 的元素。

标签： javascript sass haml codepen

【解决方案1】：

首先，Id 是唯一的Identifier，您希望将一个类应用到您的复选框或通过它们的类型或其他一些对选择多个有用的类似方法来选择它们 (querySelectorAll)

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

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

按分隔符选择所有复选框
遍历复选框
在每次迭代中，您将应用一个点击处理程序
在点击处理程序中，您可以设置所需的操作。

【讨论】：