js checkbox选中事件|极客笔记

js checkbox选中事件

一、概述

checkbox（复选框）是一种常见的用户界面元素，用于允许用户从一组可选项中选择一个或多个选项。在前端开发中，经常需要根据checkbox的选中状态来执行相应的操作。本文将详细介绍如何通过JavaScript监听和处理checkbox的选中事件。

二、HTML结构

首先，我们先创建一个包含多个checkbox的HTML结构。以下是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Checkbox选中事件</title>
</head>
<body>
    <h1>请选择您的爱好：</h1>
    <input type="checkbox" id="football" name="hobby" value="足球">
    <label for="football">足球</label><br>
    <input type="checkbox" id="basketball" name="hobby" value="篮球">
    <label for="basketball">篮球</label><br>
    <input type="checkbox" id="tennis" name="hobby" value="网球">
    <label for="tennis">网球</label><br>
    <input type="checkbox" id="swimming" name="hobby" value="游泳">
    <label for="swimming">游泳</label><br>
</body>
</html>

上述代码创建了一个包含四个checkbox的表单，每个checkbox都有一个对应的label元素，并使用相同的name属性将它们分组。

三、监听checkbox选中事件

要监听checkbox的选中事件，可以使用JavaScript的事件监听器。以下是实现在选中checkbox时执行操作的示例代码：

window.addEventListener('DOMContentLoaded', (event) => {
    // 获取所有checkbox元素
    const checkboxes = document.querySelectorAll('input[type="checkbox"]');

    // 为每个checkbox添加change事件监听器
    checkboxes.forEach((checkbox) => {
        checkbox.addEventListener('change', (event) => {
            if (event.target.checked) {
                console.log(` ${event.target.value} 被选中了`); } else { console.log(`$ {event.target.value} 被取消选中`);
            }
        });
    });
});

上述代码首先通过querySelectorAll方法获取所有的checkbox元素，然后使用forEach方法为每个checkbox元素添加一个change事件监听器。

在事件监听器中，通过event.target可以获取触发事件的checkbox元素。通过event.target.checked可以判断checkbox是否被选中，如果为true，则表示被选中，否则表示未选中。

以上代码仅在控制台输出选中或取消选中的信息，可以根据实际需求，在条件判断的分支中执行相应的操作。

四、示例运行结果

当选中“足球”和“篮球”两个checkbox时，控制台将输出以下结果：

足球 被选中了
篮球 被选中了

当取消选中“足球”和“篮球”两个checkbox时，控制台将输出以下结果：

足球 被取消选中
篮球 被取消选中

五、总结

通过以上的介绍，我们了解了如何通过JavaScript监听和处理checkbox的选中事件。通过事件监听器，我们可以在checkbox被选中或取消选中时执行相应的操作，从而实现更丰富的用户交互体验。在实际开发中，可以根据具体需求，自定义checkbox选中事件的处理逻辑。

js checkbox选中事件