在 JavaScript 中获取选定的单选按钮值

Shraddha Paghdar 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中使用 document.querySelector() 获取单选元素值
  2. 通过 JavaScript 中的 getElementsByName() 获取 Radio 元素值
在 JavaScript 中获取选定的单选按钮值

单选按钮是一个 HTML 输入元素,它指定了用户可以从中选择任何选项的各种选项。在本文中,我们将学习如何在 JavaScript 中获取这个 HTML 元素的值。

在 JavaScript 中使用 document.querySelector() 获取单选元素值

它是 JavaScript 提供的基本 document 技术,并返回其 selector 匹配所需 selector 的 Objects/NodeList 部分。querySelector()querySelectorAll() 之间的唯一区别是首先返回单个匹配项对象,然后返回所有匹配项的对象。如果传递了无效的 selector,则返回 SyntaxError

语法:

document.querySelector($selector);

selector 是指定类的匹配条件或标识符的必需参数。此字符串必须是有效的 CSS 选择字符串。它返回 DOM 中满足 selector 条件的第一个匹配元素对象。

有关更多信息,请阅读 querySelector 方法的文档。

示例代码:

<label for="gender">Gender: </label>
<input type="radio" name="gender" value="Male">Male
<input type="radio" name="gender" value="Female" checked="checked">Female

<button type="button" onclick="console.log(document.querySelector('input[name=gender]:checked').value)">
Click to check
</button>

在上面的代码中,我们定义了两个输入元素,其值为 MaleFemale。当我们使用 querySelector() 访问文档时,它会找到所有名称属性与性别匹配且已检查属性设置为 true 的节点。由于这是一个对象,我们可以直接提取值。如果你需要查找多个匹配元素,可以使用 querySelectorAll() 并遍历数组,并打印所有值。上面代码的输出将如下所示:

输出:

Female

通过 JavaScript 中的 getElementsByName() 获取 Radio 元素值

这是 JavaScript 提供的基本 document 技术,并返回其 name 属性与所需名称匹配的 Objects/NodeList 部分。此 NodeList 表示使用索引可访问的节点数组,并且此索引与任何其他数组一样以 0 开头。

语法:

document.getElementsByName(name);

name 是一个必需参数,用于指定必须匹配的 HTML 属性的 name。如果找到任何匹配的元素,则返回匹配的 DOM 元素的对象;否则,它返回 null

getElementsByNamequerySelectorAll 之间的唯一区别是 getElementsByName 首先仅选择指定名称属性与给定名称匹配的那些元素。相比之下,querySelectorAll 可以使用任何选择器,这为其提供了更大的灵活性。

有关更多信息,请阅读 getElementById 方法的文档。

示例代码:

<label for="gender">Gender: </label>
<input type="radio" name="gender" value="Male" checked="checked">Male
<input type="radio" name="gender" value="Female">Female
const radios = document.getElementsByName('gender');

for (var i = 0; i <  radios.length; i++) {
  if (radios[i].checked) {
    console.log(radios[i].value);
    break;
  }
}

在上面的代码中,我们定义了两个输入元素,其值为 MaleFemale。当我们使用 getElementsByName() 访问文档时,它会找到 name 属性与 name 匹配的所有节点并返回 NodeList。由于这是一个数组,我们可以用 [0] 提取第一个匹配元素。如果找到多个匹配项,你可以浏览数组并打印所有值。上面代码的输出将如下所示:

输出:

Male
Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn