在 JavaScript 中检查是否选中了复选框
获取复选框值
在 JavaScript 中使用 querySelectorAll() 获取多个选定复选框的值
使用 JavaScript 中的 getElementById() 方法获取多个选定复选框的值
本文将帮助你使用 JavaScript 检查是否选中了复选框，获取选中复选框的值，以及选择/取消选择所有复选框。
在 JavaScript 中检查是否选中了复选框
复选框有两种状态：选中和未选中。
你可以按照这些过程来确定复选框的条件。
首先，使用 getElementById() 或 querySelector() 之类的 DOM 技术 来选择复选框。
然后，进入复选框元素的选中属性。如果其选中的属性是实际的，则选中该复选框；否则，它不是。
以下代码使用 querySelector() 方法显示了这一点。
Submit
在这个例子中，
首先，你可以创建一个 Html 复选框元素。
Submit
其次，检查带有 id #submit 的复选框的选中属性。
const js = document.querySelector('#submit');
console.log(js.checked);
由于未选中该复选框，因此控制台中显示的结果将为 false。
false
如果选中该复选框，它将在控制台中显示 true。
例子：
Submit
你将在控制台中看到输出为 true。
true
获取复选框值
复选框 和按钮 可以在下一页找到。单击按钮时，复选框的值将显示在控制台窗口上：
Payment
无论复选框是否被选中，当你获得复选框的 value 属性时，你总是会获得 on 字符串。
在 JavaScript 中使用 querySelectorAll() 获取多个选定复选框的值
在下一页可以找到三个复选框。当你选择一个或多个复选框并按下按钮时，将显示所选复选框的值。
Select your favorite subject:
下面是它的工作原理。
我们在 HTML 中创建了三个具有相同名称（颜色）但值不同的复选框元素。
在 JavaScript 中：
首先，将以下内容添加到按钮的单击事件处理程序中：
其次，使用文档选择指定的复选框。在 click 事件处理程序中，使用 querySelectorAll() 方法：
第三，使用选中复选框的值创建一个数组：
const bt = document.querySelector('#bt');
bt.addEventListener('click', (event) => {
let checkboxes = document.querySelectorAll('input[name="subject"]:checked');
let output = [];
checkboxes.forEach((checkbox) => {
output.push(checkbox.value);
});
alert(output);
});
使用 JavaScript 中的 getElementById() 方法获取多个选定复选框的值
现在你将学习如何使用 getElementById() 方法获取所有用户的复选框值。看看下面的例子。
Create a checkbox and get its value
Select the subject, you are interested in
输出：
通过运行这段代码，我们会得到类似下面的响应，你可以在其中选择你熟悉的主题。
演示
Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe