单选按钮（radio buttons）是一种常见的用户界面元素，通常用于让用户从几个选项中选择一个。在前端开发中，我们经常需要通过检查单选按钮的状态来执行特定的操作或表单验证。
本文将介绍如何使用 JavaScript 检查单选按钮是否被选中，并提供实际的示例代码以帮助你更好地理解。
获取单选按钮的值
要检查单选按钮是否被选中，首先需要获取其值。在 HTML 中，每个单选按钮都有一个唯一的值，可以通过 value 属性来获取。
例如，下面的 HTML 代码定义了三个单选按钮，它们的值分别为 "male"、"female" 和 "other"：
<form> <input type="radio" name="gender" value="male"> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other<br> </form>
要获取选中的单选按钮的值，可以使用以下 JavaScript 代码：
const gender = document.querySelector('input[name="gender"]:checked').value;这里使用了 querySelector 方法来选择选中的单选按钮元素，然后通过 value 属性获取其值。注意，name 属性必须设置为相同的值，以便浏览器知道它们是彼此相关的。
检查单选按钮是否被选中
得到单选按钮的值后，就可以检查它是否被选中了。在 JavaScript 中，可以使用 checked 属性来判断单选按钮是否选中。
例如，下面的代码演示了如何检查名为 "gender" 的单选按钮组是否有选中的按钮：
-- -------------------- ---- -------
----- ------------- - -------------------------------------
--- ---------------- - ------
--- ------ ------ -- -------------- -
-- ---------------- -
---------------- - -----
------
-
-
-- ------------------ -
-------------- ------ --- ---- ------------
- ---- -
------------------- ------ - ----------
-这里首先通过 getElementsByName 方法获取名为 "gender" 的所有单选按钮元素。然后使用一个循环遍历每个按钮，并检查其 checked 属性是否为真。如果找到一个选中的按钮，就将 isGenderSelected 设置为 true 并退出循环。最后根据 isGenderSelected 的值输出不同的提示信息。
示例代码
以下是完整的 HTML 和 JavaScript 代码，用于演示如何检查单选按钮是否被选中：
-- -------------------- ---- -------
------
------ ------------ ------------- ------------- --------
------ ------------ ------------- --------------- ----------
------ ------------ ------------- -------------- ---------
-------
------- ----------------------------- ---------------
--------
-------- ------------- -
----- ------------- - -------------------------------------
--- ---------------- - ------
--- ------ ------ -- -------------- -
-- ---------------- -
---------------- - -----
------
-
-
-- ------------------ -
-------------- ------ --- ---- ------------
- ---- -
------------------- ------ - ----------
-
-
---------在这个示例中，我们定义了一个名为 "checkGender" 的函数，并将其绑定到一个按钮的点击事件上。当用户点击按钮时，该函数会检查单选按钮是否被选中，并输出相应的提示信息到控制台。
总结
本文介绍了如何使用 JavaScript 检查单选按钮是否被选中，并提供了实际的示例代码。通过理解这些概念和技术，你可以更好地处理表单验证和交互操作，从而提高你的前端开发技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8975