在 HTML 表单中，我们常常使用单选按钮来让用户从几个选项中选择一个。但是，当单选按钮的名称相同时，我们该如何获取用户所选择的值呢？在本文中，我们将介绍在 jQuery 中如何获得具有相同名称的单选按钮的值，并提供示例代码和解释。
获取相同名称单选按钮的值
首先，我们需要明确两个概念：单选按钮的名称和值。单选按钮的名称是由 name 属性指定的，而值则是由 value 属性指定的。如果多个单选按钮具有相同的名称，则它们被认为是一组单选按钮，用户只能从其中选择一个。
要获取这组单选按钮中用户所选择的值，我们可以使用 jQuery 中的 :checked 选择器来选择当前被选中的单选按钮，然后获取其值。例如，假设我们有以下 HTML 代码：
<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
这里有三个单选按钮，它们的名称都是 gender。如果我们想获取用户选择的值，可以使用以下 jQuery 代码：
var gender = $('input[name="gender"]:checked').val();这里的 $() 函数用于选择所有名称为 gender 的单选按钮，并使用 :checked 选择器过滤出当前被选中的单选按钮。然后，我们可以使用 .val() 方法来获取其值。如果用户没有选择任何单选按钮，则变量 gender 将为 undefined。
示例代码
以下是一个完整的示例，演示如何在 jQuery 中获取具有相同名称的单选按钮的值：
-- -------------------- ---- -------
--------- -----
------
------
------------- ----- ------ ------------
------- -----------------------------------------------------------
--------
---------------------------- -
--------------------------------- -
--- ------ - ----------------------------------------
-- ------- --- ---------- -
------------- ------ ---- ----------
- ---- -
----------- ------ -- - - --------
-
---
---
---------
-------
------
------
------------- ------------ ------------- ------------- ----------------
------------- ------------ ------------- --------------- ------------------
------------- ------------ ------------- -------------- ---------------------
------- ------------- -------------------------------
-------
-------
-------这个示例包含一个表单，其中包含三个具有相同名称的单选按钮。当用户单击“提交”按钮时，它将检查用户是否选择了单选按钮，并显示一个警告框或者将所选值显示在警告框中。
总结
在 jQuery 中，可以使用 :checked 选择器来获取具有相同名称的单选按钮的值。要做到这一点，请使用 $() 函数选择所有名称为 name 的单选按钮，并使用 :checked 过滤出当前被选中的单选按钮，然后使用 .val() 方法获取其值。通过这种方式，我们可以轻松地处理 HTML 表单中的单选按钮，并获取用户所选择的值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10599
