如何通过jQuery判断哪个单选按钮被选中：完整指南

为什么这很重要以及如何避免在单选按钮中混淆

想象一下：您正在创建一个反馈表单、调查问卷或个人资料设置。在任何需要用户从多个选项中选择一个的场景中，单选按钮（radio buttons）都能派上用场。但一旦涉及到在客户端处理选择结果，许多新手（甚至是有经验的开发者）都会遇到困难。问题 "How can I know which radio button is selected via jQuery?" 是Stack Overflow上最热门的问题之一，这并不奇怪：看似简单，但其中却有不少细微之处。

在本指南中，我们将介绍几种使用jQuery获取选中单选按钮值的方法。您将学习如何避免常见错误、如何编写简洁的代码，以及如何针对不同场景调整解决方案。让我们开始吧！

单选按钮的基本HTML结构

在编写jQuery代码之前，我们先创建一个简单的单选按钮表单。假设我们询问用户最喜欢的编程语言：

<form id="surveyForm">\n  <p>您最喜欢的编程语言：</p>\n  <label>\n    <input type="radio" name="language" value="python"> Python\n  </label>\n  <label>\n    <input type="radio" name="language" value="javascript"> JavaScript\n  </label>\n  <label>\n    <input type="radio" name="language" value="java"> Java\n  </label>\n  <br><br>\n  <button type="button" id="getResult">查看选择</button>\n</form>

请注意：所有单选按钮都具有相同的属性 name="language"。正是这一点将它们组合成一个组——您只能选择一个选项。如果名称不同，它们将成为独立的组。

方法1：jQuery选择器 :checked —— 经典方法

最直接且最常用的方法是使用选择器 :checked。它会找到所有被选中（已勾选）的表单元素。结合 .val()，我们可以立即获取值：

$('#getResult').on('click', function() {\n  var selectedValue = $('input[name="language"]:checked').val();\n  if (selectedValue) {\n    alert('您选择了：' + selectedValue);\n  } else {\n    alert('未选择任何选项！');\n  }\n});

这里发生了什么？

\n
• $('input[name="language"]:checked') —— 在所有名为"language"的input元素中，只查找那些被选中的。
\n
• .val() —— 获取找到元素的 value 属性。
\n
• 检查 if (selectedValue) —— 如果未选择任何选项，.val() 将返回 undefined，我们会显示警告信息。
\n

当您只有一个单选按钮组并且需要获取其中一个的值时，这种方法非常理想。

方法2：使用 .filter() 和 .is() 实现灵活性

有时您不想仅仅依赖 :checked，或者需要对选中的元素执行额外操作。这时 .filter() 和 .is() 方法就派上用场了：

$('#getResult').on('click', function() {\n  var selected = $('input[name="language"]').filter(':checked');\n  if (selected.length > 0) {\n    console.log('选中的元素：', selected);\n    var value = selected.val();\n    var id = selected.attr('id');\n    alert('值：' + value + ', ID：' + (id || '无'));\n  } else {\n    alert('请选择一种语言。');\n  }\n});

.filter(':checked') 方法从集合中筛选出仅被选中的元素。而 .is(':checked') 可用于检查特定元素：

// 检查Python是否被选中\nif ($('input[value="python"]').is(':checked')) {\n  console.log('Python — 绝佳选择！');\n}

当您不仅需要获取值，还需要对选中的元素进行操作时，这种方法非常方便。