JavaScript 检测复选框是否被选中

在网页开发中，常常需要知道用户是否勾选了复选框，以便进行相应的逻辑处理。JavaScript 提供了简单且有效的方法来检测复选框的选中状态。

我们要获取到页面中的复选框元素。可以使用 document.getElementById() 方法，前提是为复选框设置了唯一的 id 属性。例如：<input type="checkbox" id="myCheckbox">，然后在 JavaScript 中通过 const checkbox = document.getElementById('myCheckbox'); 获取该复选框。

检测复选框是否被选中，使用的是复选框元素的 checked 属性。这个属性是一个布尔值，当复选框被选中时，它为 true；未被选中时，为 false。比如我们可以这样写代码来检测：

if (checkbox.checked) {
    console.log('复选框被选中了');
} else {
    console.log('复选框未被选中');
}

除了静态检测，在实际应用中，我们更多时候需要实时监听复选框状态的变化。这就要用到 addEventListener 方法来绑定一个事件监听器。示例代码如下：

checkbox.addEventListener('change', function () {
    if (this.checked) {
        console.log('复选框现在被选中了');
    } else {
        console.log('复选框现在未被选中');
    }
});

上述代码中，当复选框的状态发生改变时，会触发 change 事件，然后根据当前的 checked 属性值输出相应的信息。

如果页面中有多个复选框，并且需要批量检测它们的选中状态，可以使用 document.querySelectorAll() 方法获取所有复选框的集合。例如：const checkboxes = document.querySelectorAll('input[type="checkbox"]');。然后通过循环遍历这个集合来检测每个复选框的状态：

checkboxes.forEach(function (checkbox) {
    checkbox.addEventListener('change', function () {
        if (this.checked) {
            console.log(this.id + '被选中了');
        } else {
            console.log(this.id + '未被选中');
        }
    });
});

掌握 JavaScript 检测复选框是否被选中的方法，能为网页交互功能的实现提供有力支持，无论是简单的表单验证，还是复杂的业务逻辑处理，都能更加得心应手。通过合理运用这些技巧，开发者可以打造出更加友好、高效的用户界面。