在前端页面中，单选按钮是常见的交互元素之一。当用户选择了一个单选按钮后，我们通常需要获取该单选按钮的值以进行相应的处理。本文将介绍如何使用JavaScript获取单选按钮的值，并提供相关示例代码。
HTML结构
首先，我们需要创建一组包含多个单选按钮的HTML结构。以下是一个简单的示例：
<form> <input type="radio" name="gender" value="male">男性 <input type="radio" name="gender" value="female">女性 </form>
以上代码定义了一个名为gender的单选按钮组，其中包含两个选项：男性和女性。每个单选按钮的值分别为male和female。
获取单选按钮的值
要获取单选按钮的值，我们需要使用JavaScript。以下是一个基本的示例：
-- -------------------- ---- -------
----- ------ - -------------------------------------
--- --------------
--- ---- - - -- - - -------------- ---- -
-- ------------------- -
------------- - ----------------
------
-
-
---------------------------以上代码首先通过document.getElementsByName方法获取同名单选按钮组的所有元素，然后循环遍历这些元素，找到被选中的单选按钮并获取其值。最后，将该值打印到控制台中。
深入探讨
在上述示例中，我们使用了document.getElementsByName方法来获取单选按钮组的所有元素。这个方法返回一个NodeList对象，它包含了文档中所有具有给定名称的元素。由于单选按钮都有相同的名称，因此我们可以使用该方法来获取整个单选按钮组。
接下来，在循环遍历单选按钮组的过程中，我们使用了单选按钮的checked属性来判断是否被选中。如果某个单选按钮被选中，那么它的checked属性将为true，否则为false。如果找到了被选中的单选按钮，我们就可以使用其value属性来获取其值。
需要注意的是，如果单选按钮组中没有任何一个选项被选中，那么以上代码将会输出undefined。因此，在实际开发中，我们需要先对单选按钮组进行验证，以确保至少有一个选项被选中。
示例代码
以下是一个完整的示例，其中演示了如何通过验证单选按钮组来确保至少有一个选项被选中：
-- -------------------- ---- -------
------
------ ------------ ------------- ---------------
------ ------------ ------------- -----------------
-------
------- -------------------------------------------
--------
-------- ------------------ -
----- ------ - -------------------------------------
--- --------------
--- ---- - - -- - - -------------- ---- -
-- ------------------- -
------------- - ----------------
------
-
-
-- --------------- -
---------------------------
- ---- -
------------------
-
-
---------以上代码中，我们通过给按钮添加onclick事件来触发获取选中值的操作。在getSelectedValue函数中，我们首先获取单选按钮组的所有元素，然后循环遍历这些元素并找到被选中的单选按钮。如果找到了被选中的单选按钮，我们就可以将其值打印到控制台中。否则，我们将弹出一个提示框，提醒用户必须选择一个选项。
结论
本文介绍了如何使用JavaScript获取单选按钮的值。通过学习本文的内容，您应该能够了解如何
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24099