用 jQuery 获取表单中收音机的选中值

如果您正在尝试通过 jQuery 获取 HTML 表单中收音机（Radio）输入框的选中值，本文将会向您展示如何完成此操作。

HTML

首先，让我们看一下将要使用的 HTML 代码：

<label>
  <input type="radio" name="color" value="red" />
  红色
</label>
<label>
  <input type="radio" name="color" value="green" />
  绿色
</label>
<label>
  <input type="radio" name="color" value="blue" />
  蓝色
</label>
<button id="btnSubmit">提交</button>

上面的 HTML 代码定义了一个包含三个收音机输入框和一个提交按钮的表单。每个收音机输入框都有一个相同的“name”属性，这使我们能够将它们绑定到同一个输入组中。

jQuery

接下来，我们将使用 jQuery 来获取当前选中的收音机输入框的值。

$(document).ready(function() {
  $('#btnSubmit').click(function() {
    // 获取收音机的选中值
    var selectedValue = $('input[name=color]:checked').val();
    alert('您选择的颜色是 ' + selectedValue);
  });
});

上面的代码将在按钮点击事件中执行。它使用 jQuery 的 “click” 方法来捕获按钮的点击事件，并使用选择器选择具有“name”属性值为“color”的所有输入框。然后，通过使用jQuery的 “:checked” 伪类选择名为“color”的收音机输入框的选中值。

最后，使用 JavaScript 的 “alert” 方法显示结果。

结论

您现在已经了解了如何使用 jQuery 获取 HTML 表单中收音机输入框的值。希望本文能够对您有所帮助。