js checkbox勾选触发事件

作者：潮起潮落发布日期:2026-03-09 浏览:31

<!DOCTYPE html>
<html>
<head>
    <title>JS Checkbox勾选触发事件</title>
</head>
<body>
    <input type="checkbox" id="myCheckbox"> 勾选我</input>
    <p id="message"></p>

    <script>
        // 获取checkbox元素
        const checkbox = document.getElementById('myCheckbox');
        // 获取用于显示消息的段落元素
        const message = document.getElementById('message');

        // 为checkbox添加change事件监听器
        checkbox.addEventListener('change', function() {
            // 检查checkbox是否被勾选
            if (this.checked) {
                // 如果被勾选，更新消息内容
                message.textContent = '你勾选了复选框';
            } else {
                // 如果未被勾选，更新消息内容
                message.textContent = '你取消了勾选';
            }
        });
    </script>
</body>
</html>

解释说明：

HTML部分：
- 创建了一个<input>标签，类型为checkbox，并赋予其ID为myCheckbox。
- 创建了一个<p>标签，用于显示根据checkbox状态变化的消息。
JavaScript部分：
- 使用document.getElementById方法获取页面中的checkbox和用于显示消息的<p>标签。
- 使用addEventListener方法为checkbox添加change事件监听器，当用户勾选或取消勾选时触发。
- 在事件处理函数中，通过this.checked属性判断checkbox的状态，并根据状态更新<p>标签的内容。

上一篇：js checkbox checked

下一篇：nodejs opencv