所以我的目标是能够使用我创建的自定义复选框切换输入。现在我有它工作,但是,它只将类添加到第一个孩子(选项1)
见下图 enter image description here
当我单击选项2和三时,默认复选框仍显示
我尝试过使用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
答案 0 :(得分:0)
首先,Id是一个唯一的Id
entifier,您希望将一个类应用于您的复选框,或者按类型或其他类似方法选择它们,以便选择多个(querySelectorAll
)< / p>
const checkboxHandler = checkbox => {
checkbox.addEventListener('click', event => {
event.preventDefault();
checkbox.classList.toggle('checkmark');
})
};
let checkboxes = document.querySelectorAll('.checkbox')
checkboxes.forEach(checkboxHandler);