如何使用 JavaScript 检查单选按钮？

单选按钮是一种图标，用于表单中从用户那里获取输入。它允许用户从一组单选按钮中选择一个值。单选按钮主要用于从多个选项中进行单项选择，这在 GUI 表单中很常见。

您可以在两个或多个单选按钮之间只选中一个。在本章中，我们将指导您如何使用 JavaScript 编程语言 来检查单选按钮。

为此，我们首先使用 HTML 设计一个包含单选 按钮 的表单，然后我们将使用 JavaScript 编程来检查单选按钮。我们还将检查哪个单选按钮的值被选中。

创建单选按钮

以下是创建一组单选按钮的简单代码。

复制代码

检查单选按钮

我们不需要编写任何特定代码来检查单选按钮。它们可以在创建或在 HTML 表单 中指定后被选中。

但是，我们必须编写 JavaScript 代码来获取已选中单选按钮的值，我们将在下面的章节中看到。

检查单选按钮是否被选中

在 JavaScript 中，有两种方法可以检查已标记的单选按钮或确定哪个单选按钮被选中。JavaScript 为此提供了两个 DOM 方法。

• getElementById
• querySelector

input radio checked 属性用于检查复选框是否被选中。使用 document.getElementById('id').checked 方法进行检查。它将以布尔值返回单选按钮的选中状态。可以是 true 或 false。

True - 如果单选按钮被选中。

False - 如果单选按钮未被选中。

请参阅下面的 JavaScript 代码了解其工作原理。

示例

例如，我们有一个名为 Summer 的单选按钮，id 为 'summer'。现在，我们将使用此按钮 ID 来检查单选按钮是否被标记。

复制代码

querySelector()

querySelector() 函数是 JavaScript 的一个 DOM 方法。它在其中使用单选按钮的公共名称属性。此方法如下所示，用于检查哪个单选按钮被选中。

示例

例如，我们有一组单选按钮，所有按钮的 name 属性都为 name = 'season'。现在，在名为 season 的这些按钮中，我们将检查哪个被选中。

复制代码

获取已选中单选按钮的值

使用 getElementById()

以下是使用 getElementById() 方法获取已选中单选按钮值的代码。

复制代码

使用 querySelector()

以下是使用 querySelector() 方法获取已选中单选按钮值的代码。

复制代码

获取选中单选按钮值的完整代码

在本示例中，我们将所有上述代码组合在一起，以创建和检查单选按钮。之后，我们还将获取选中单选按钮的值。

复制代码

输出

当您执行上述代码时，它将在 Web 上运行并显示如下所示的输出。

选择一个单选按钮，然后单击 Submit 按钮，即可获取选中的值。

如果您未选择任何季节而直接单击 Submit 按钮，则会显示错误消息 - 您尚未选择任何季节，因为我们使用了验证。

获取选中单选按钮的值：querySelector()

DOM querySelector() 方法

querySelector() 函数是 JavaScript 的一个 DOM 方法。此方法用于获取文档中与指定的 CSS 选择器 匹配的元素。请记住，您需要在 HTML 代码中指定单选按钮的 name 属性。

它在 <script> 标签内使用 document.querySelector('input[name="JTP"]:checked') 来从一组单选按钮中检查选中的单选按钮值。它通过一行简短的代码获取选中单选按钮的值，从而缩短了代码长度。

以下代码演示了如何与 HTML 表单一起使用。

复制代码

输出

当您执行上述代码时，它将在 Web 上显示如下所示的输出。在此，请选择您喜欢的季节。

当您在给定的单选按钮中选择一个值并单击 Submit 按钮时，您将在 Web 上获得选定的值。

如果您在未选择任何单选按钮的情况下单击 Submit 按钮，则会显示错误消息 - 您尚未选择任何季节。

因此，您可以看到 getElementById('season').value 和 document.querySelector('input[name="JTP"]:checked') 的工作方式相同。它们都用于查找已选中的单选按钮值。您可以使用其中任何一个。

getElementById 与 querySelector 对比

两个 DOM 方法 getElementByID() 和 querySelector() 的工作方式几乎相同。但是，它们在性能和代码大小等方面也存在一些差异。让我们看看它们之间的一些区别。

代码长度

使用 getElementById 编写的代码比 querySelector 稍长。使用 getElementById 方法，我们需要单独检查每个单选按钮以确定哪个被选中。

另一方面，如果您使用 querySelector DOM 方法，您只需一行代码即可检查已标记的单选按钮并获取其值。因此，结论是 querySelector 需要更少的代码。

性能

两个函数都提供良好的性能，但您只需要知道哪个更好。getElementById 方法比 querySelector 方法快得多。querySelector 方法也更复杂一些。

DOM 方法使用的值

getElementById 方法在检查已标记的按钮时始终使用每个单选按钮的唯一 id，并返回与 id 匹配的第一个元素。

而 querySelector 使用所有单选按钮的公共 name (selector) 来获取已标记的单选按钮，并返回与指定选择器匹配的第一个元素。