在前端开发中，单选按钮是非常常见的用户输入控件之一。获取单选按钮的值是处理表单数据的重要一步。本文将介绍如何使用 JavaScript 获取单选按钮的值。
HTML 单选按钮
HTML 中的单选按钮使用 <input type="radio"> 标签表示。每个单选按钮都应该有一个唯一的 value 属性，以便在提交表单时可以识别所选的选项。
以下是两个示例单选按钮：
<input type="radio" name="gender" value="male"> <label for="male">Male</label> <input type="radio" name="gender" value="female"> <label for="female">Female</label>
上述代码中，name 属性用于将单选按钮分组，并与其他单选按钮区分开来。for 属性与其对应的 <input> 元素的 id 属性相同，以使点击标签具有选择单选按钮的效果。
获取单选按钮的值
通过 JavaScript 代码，可以轻松地获取选定单选按钮的值。有两种方法可以实现这一点：使用 querySelector() 或循环遍历所有单选按钮并检查其 checked 属性。
使用 querySelector()
如果您知道单选按钮的名称或 ID，则可以使用 querySelector() 方法轻松获取其值。以下是示例代码：
const gender = document.querySelector('input[name="gender"]:checked').value;
console.log(gender);上述代码中，querySelector() 方法选择了一个具有 name="gender" 属性且被选中的单选按钮。然后，通过 .value 获取其值并将其存储在 gender 变量中。
请注意，如果没有选择任何单选按钮，则 querySelector() 将返回 null。因此，在使用该方法之前，应该先检查是否已选择了单选按钮。
循环遍历所有单选按钮
如果您不知道单选按钮的名称或 ID，则可以使用循环来检查每个单选按钮的 checked 属性以查找所选项。以下是示例代码：
-- -------------------- ---- -------
----- ------ - -------------------------------------
--- -------
-------------------- -- -
-- --------------- -
------ - ------------
-
---
--------------------上述代码中，getElementsByName() 方法获取了所有具有 name="gender" 属性的单选按钮，并将其存储在 radios 中。然后，通过循环遍历每个单选按钮，并检查其 checked 属性以查找所选项。最后，将所选的值存储在 gender 变量中。
总结
本文介绍了如何使用 JavaScript 获取单选按钮的值。您可以使用 querySelector() 方法或循环来遍历所有单选按钮。无论您使用哪种方法，都应该首先确保至少选择了一个单选按钮。希望这篇文章能够帮助您更好地处理前端表单数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9051
