如何在 JavaScript 中获取所有选中的复选框值？

复选框是一个选择框，允许用户通过选中和取消选中来进行二元选择（true 或 false）。基本上，复选框是一个图标，常用于 GUI 表单和应用程序中，用于获取用户的一个或多个输入。

• 如果复选框被标记或选中，则表示 true；这意味着用户已选择该值。
• 如果复选框未标记或未选中，则表示 false；这意味着用户未选择该值。

请记住，复选框与单选按钮和下拉列表不同，因为它允许多个选择。相比之下，单选按钮和下拉列表允许我们从给定的选项中只选择一个。

在本章中，我们将看到如何使用 JavaScript 获取所有标记的 复选框 值。

创建复选框语法

要创建复选框，请使用 HTML <input> 标签，并在标签内使用 type="checkbox"，如下所示：

虽然您也可以通过 JavaScript 创建复选框对象来创建复选框，但这种方法有点复杂。我们稍后将讨论这两种方法。

示例

创建和获取复选框值

在此示例中，我们将创建两个复选框，但条件是用户必须在两者之间标记一个复选框。然后我们将获取标记的复选框的值。请看下面的代码

复制代码

输出

如果您标记了是复选框，然后单击提交按钮，将显示如下所示的消息

如果您在未标记任何复选框的情况下单击提交按钮，将显示一条错误消息。

同样，您可以检查其他条件下的输出。

获取所有复选框值

现在，您将看到如何获取用户标记的所有复选框值。请看下面的示例。

复制代码

输出

通过执行此代码，我们将获得如下屏幕截图的响应，其中包含一些编程语言，您可以选择您知道的语言。

在这里，您单击全选按钮，它将标记所有编程语言的复选框。之后，单击提交按钮以获取响应。

虽然您可以逐个选择语言，通过标记单个复选框，然后单击提交按钮来获取结果。

输出：当您未选择任何内容时

使用 querySelectorAll() 方法获取所有标记的复选框值

还有一种方法可以获取用户标记的复选框的所有选定值。您将看到如何使用 querySelectorAll() 方法获取用户标记的所有复选框的值。这将从 HTML 表单 中提取复选框值并显示结果。

获取所有复选框值

现在，您将看到如何获取用户标记的所有复选框值。请看下面的示例。

复制代码

输出

在这里，您可以看到已返回所有标记的复选框值。

获取标记复选框值的不同 JavaScript 代码

获取所有选中复选框值的 JavaScript 代码

您还可以使用以下代码来获取所有选中的复选框值。

因此，复选框元素允许多选。这意味着用户可以选择在 HTML 表单中定义的多个选项。您甚至可以选择所有复选框。在上面的示例中，您已经看到了这一点。