在前端开发中，处理表单数据是一个很常见的任务。而对于单选按钮组，我们需要获取用户选择的值来进行后续处理。本文将介绍如何使用 JavaScript 和 HTML 的单选按钮元素来获取所选项的值。
单选按钮组的 HTML 结构
首先，我们需要了解单选按钮组的 HTML 结构。单选按钮组通常由一组具有相同 name 属性的单选按钮组成，例如：
<form> <input type="radio" name="gender" value="male" id="male"> <label for="male">男</label> <input type="radio" name="gender" value="female" id="female"> <label for="female">女</label> </form>
在上面的示例中，我们创建了一个名为 gender 的单选按钮组，其中包含两个选项：男和女。每个单选按钮都有相同的 name 属性，这表示它们属于同一组。此外，每个单选按钮都有一个不同的 id 属性，用于关联其对应的标签。
获取所选单选按钮的值
要获取用户选择的单选按钮的值，我们可以使用 JavaScript 来遍历单选按钮组并找到被选中的按钮。以下是一个示例函数，它返回所选单选按钮的值：
-- -------------------- ---- -------
-------- --------------------------------- -
----- ------- - ---------------------------------
--- ----- - -----
------------------------ -- -
-- ---------------- -
----- - -------------
-
---
------ ------
-在上面的例子中，我们首先使用 document.getElementsByName 方法来获取具有指定名称的单选按钮组。然后，我们遍历这些按钮，并找到被选中的按钮。如果找到了被选中的按钮，我们将其值存储在一个变量中并返回它。如果没有找到被选中的按钮，则返回 null。
示例代码
以下是一个完整的示例，它演示了如何使用上述函数来获取所选单选按钮的值：
-- -------------------- ---- -------
------
------ ------------ ------------- ------------ ----------
------ --------------------
------ ------------ ------------- -------------- ------------
------ ----------------------
------- --------------------------------------------------------------------
-------
--------
-------- --------------------------------- -
----- ------- - ---------------------------------
--- ----- - -----
------------------------ -- -
-- ---------------- -
----- - -------------
-
---
------ ------
-
---------在这个示例中，我们创建了一个包含两个单选按钮（男和女）的单选按钮组，并添加了一个“检查选择”按钮。当用户点击该按钮时，我们调用 getSelectedRadioButtonValue 函数来获取所选单选按钮的值，并使用 alert 方法将其显示给用户。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15646