如何检查控制台中是否选中了列表项
如何检查控制台中是否选中了列表项
提问于 2021-06-17 02:08:57
我希望在控制台中选择选中的复选框。即使我正在检查复选框，它仍然在控制台中返回“未选中”。
const list = Array.from(document.querySelectorAll('.specializations-list'));
list.forEach(function (listItems) {
if (listItems.checked) {
console.log('checked');
} else {
console.log('not checked');
}
}) <form class="form">
<div class="specializations-list">
<div class="list-items">
<input type="checkbox" name="specialization" value = "Item-1">Item-1
<br>
<input type="checkbox" name="specialization" value="Item-2">Item-2
<br>
<input type="checkbox" name="specialization" value="Item-3">Item-3
</div>
<input type="checkbox" name="specialization" value="Item-4" >Item-4
<br>
<input type="checkbox" name="specialization" value="Item-5" >Item-5
<br>
<input type="checkbox" name="specialization" value="Item-6">Item-6
</div>
</form>
回答 4
Stack Overflow用户
回答已采纳
发布于 2021-06-17 02:29:07
您可以在复选框更改时使用event.target和事件侦听器。
const list = Array.from(document.querySelectorAll("input[type='checkbox']"));
function check(e){
if (e.target.checked) {
console.log(`${e.target.value} is checked`);
}
}
list.forEach(function(listItems) {
listItems.addEventListener('change', check)
})<form class="form">
<div class="specializations-list">
<div class="list-items">
<input type="checkbox" name="specialization" value="Item-1">Item-1
<br>
<input type="checkbox" name="specialization" value="Item-2">Item-2
<br>
<input type="checkbox" name="specialization" value="Item-3">Item-3
</div>
<input type="checkbox" name="specialization" value="Item-4">Item-4
<br>
<input type="checkbox" name="specialization" value="Item-5">Item-5
<br>
<input type="checkbox" name="specialization" value="Item-6">Item-6
</div>
</form>
Stack Overflow用户
发布于 2021-06-17 02:23:53
您正在循环使用错误的元素，要检查选中与否，需要检查输入元素上的checked属性，而现在则是使用类specializations-list检查div
window.addEventListener('click', (event) => {
const list = Array.from(document.querySelectorAll('.specializations-list input[type="checkbox"]'));
list.forEach(function (listItems) {
if (listItems.checked) {
console.log('checked', listItems.value);
} else {
console.log('not checked', listItems.value);
}
})
})<form class="form">
<div class="specializations-list">
<div class="list-items">
<input type="checkbox" name="specialization" value = "Item-1">Item-1
<br>
<input type="checkbox" name="specialization" value="Item-2">Item-2
<br>
<input type="checkbox" name="specialization" value="Item-3">Item-3
</div>
<input type="checkbox" name="specialization" value="Item-4" >Item-4
<br>
<input type="checkbox" name="specialization" value="Item-5" >Item-5
<br>
<input type="checkbox" name="specialization" value="Item-6">Item-6
</div>
</form>
Stack Overflow用户
发布于 2021-06-17 02:17:11
您正在查询div元素。您必须查询输入元素，而不是div元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68011993
复制相关文章
相似问题
腾讯云开发者
