Skip to content

Latest commit

 

History

History
42 lines (28 loc) · 1.19 KB

使用 JavaScript 检查复选框是否被选中.md

File metadata and controls

42 lines (28 loc) · 1.19 KB

使用 JavaScript 检查复选框是否被选中

假设你有这个复选框:

<input type="checkbox" class="checkbox" />

想要检查复选框是否被选中,可以检查元素的 checked 属性:

document.querySelector('.checkbox').checked

你还可以检查查找 .checkbox:checked 是否不返回 null

document.querySelector('.checkbox:checked') !== null

但我认为 .checked 更简洁。

通过 addEventListener 监听 change 事件来动态检查复选框是否被选中,可以跟踪 checkbox 的状态。

document.querySelector('.checkbox').addEventListener('change', () => {
  console.log(this.checked)
})

不要使用 getAttribute() 查找 checked 属性值,因为如果复选框默认以这种方式被选中,那么它总是成立的:

<input type="checkbox" checked />

也不要检查 checkbox 元素的 value。它始终处于启用状态,无论复选框是否选中。

进一步阅读