简介
在前端开发中，复选框是常用的元素之一，但用户勾选或取消勾选复选框时，如何响应该事件并获取最新的勾选状态？这就需要使用复选框的复选状态更改事件。
本文将详细介绍如何使用JavaScript监听复选框的状态更改事件，并提供示例代码作为指导。
监听复选框的状态更改事件
使用addEventListener
我们可以通过 addEventListener 方法为复选框添加 change 事件监听器来捕获其状态更改事件：
const checkbox = document.querySelector('#checkbox');
checkbox.addEventListener('change', event => {
console.log(`Checkbox checked: ${event.target.checked}`);
});上述代码首先使用 querySelector 方法获取一个具有 id="checkbox" 的复选框，然后为其添加了一个 change 事件监听器。当用户勾选或取消勾选该复选框时，console.log() 方法会输出一个日志消息，其中包含当前的勾选状态。
使用onclick
除了使用 addEventListener，我们也可以直接在HTML中使用 onclick 属性来定义复选框的状态更改处理程序：
<input type="checkbox" id="checkbox" onclick="onCheckboxChanged(this)">
上述代码将 onclick 属性设置为 onCheckboxChanged(this)，其中 this 关键字表示当前复选框本身。然后，在JavaScript中，我们可以定义名为 onCheckboxChanged 的函数来处理状态更改事件：
function onCheckboxChanged(checkbox) {
console.log(`Checkbox checked: ${checkbox.checked}`);
}这个函数与上面的示例非常相似，但它采用了不同的方法来响应复选框的状态更改事件。
示例代码
下面是一个完整的示例，展示如何使用 addEventListener 来监听多个复选框的状态更改事件，并在页面上显示所选项的总数：
-- -------------------- ---- -------
--------- -----
------
------
--------------- ------------
-------
------
------------ ---------
------ --------------- ---------------
------ ---------------------- -------------
------ --------------- ---------------
------ ---------------------- -------------
------ --------------- ---------------
------ ---------------------- -------------
-------- --------- ----- ----------------------
--------
----- ---------- - ----------------------------------------------------
----- ----- - ---------------------------------
--------------------------- -- -
----------------------------------- -- -- -
--- ----- - --
--------------------------- -- -
-- ------------------ -
--------
-
---
----------------- - ------
---
---
---------
-------
-------此示例包含三个带有标签的复选框，并在页面上显示所选项的总数。当用户勾选或取消勾选任何复选框时，JavaScript代码将更新显示的总数。
总结
本文介绍了如何在前端开发中监听复选框的状态更改事件，并提供了示例代码作为指导。通过掌握这些技术，您可以更好地理解如何处理复选框及其相关事件，从而提高Web应用程序的交互性和可用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8175