在前端开发中，我们经常需要获取用户在表单中输入的数据。其中，复选框是一个常用的表单元素之一。本文将介绍如何使用JavaScript来判断复选框是否被选中。
HTML 中的复选框
在 HTML 中，可以使用 <input> 元素来创建复选框。以下是一个简单的例子：
<label> <input type="checkbox" id="myCheckbox" name="myCheckbox" value="1"> Check me! </label>
在这个例子中，我们创建了一个带有 id 和 name 属性的复选框，并设置了它的值为 1。同时，在标签内部加入了一个文字说明。
获取复选框状态
要判断复选框是否被选中，需要通过 JavaScript 获取该元素的状态。具体来说，可以使用 checked 属性来获取。
const myCheckbox = document.getElementById('myCheckbox');
if (myCheckbox.checked) {
console.log('The checkbox is checked.');
} else {
console.log('The checkbox is not checked.');
}上面的代码中，我们首先获取了 ID 为 myCheckbox 的元素，并使用 .checked 属性来检查它是否被选中。如果被选中，则控制台会输出 The checkbox is checked.，否则输出 The checkbox is not checked.。
示例代码
以下是一个完整的示例代码，包含了创建复选框和获取状态的步骤。你可以尝试勾选和取消勾选复选框，观察控制台输出的变化。
-- -------------------- ---- -------
--------- -----
------
------
--------------- ------------
-------
------
-------
------ --------------- --------------- ----------------- ----------
----- ---
--------
--------
----- ---------- - --------------------------------------
------------------------------------- ---------- -
-- -------------------- -
---------------- -------- -- -----------
- ---- -
---------------- -------- -- --- -----------
-
---
---------
-------
-------在上面的代码中，我们使用 addEventListener() 方法来监听复选框状态的改变事件。如果复选框的状态发生改变，就会触发回调函数，根据状态输出不同的信息。
总结
本文介绍了如何使用 JavaScript 来判断复选框是否被选中。具体来说，我们可以使用复选框元素的 checked 属性来获取其状态。同时，我们还提供了一个完整的示例代码，方便读者学习和实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24860