jQuery 选择选中的单选按钮值 - Javascript

单选按钮是一种常见的表单元素，它允许用户从给定的一组选项中选择一个选项。在开发中，我们需要获取用户选择的值，以便对其进行进一步处理。本文将介绍如何使用 jQuery 获取选中的单选按钮的值。

HTML

假设我们有一个 HTML 表单，其中包含三个单选按钮，然后将它们组合在一个项目列表中：

<form>
  <ul>
    <li><input type="radio" name="fruit" value="apple">苹果</li>
    <li><input type="radio" name="fruit" value="banana">香蕉</li>
    <li><input type="radio" name="fruit" value="orange">橙子</li>
  </ul>
</form>

单选按钮使用 type="radio" 属性声明，并使用 name 属性将它们分组在一起，以便用户只能选择其中一个。value 属性定义了每个按钮的值，该值将在提交表单时发送到服务器。

jQuery

使用 jQuery，我们可以使用以下代码获取选中的单选按钮的值：

var fruit = $('input[name="fruit"]:checked').val();

该代码首先使用 $ 函数选择单选按钮，名称为 fruit，并且选中了过滤器 :checked 中的按钮。然后，使用 val() 函数获取选中的按钮的值，存储在变量 fruit 中。

完整示例

下面是一个完整的示例，演示如何在单击提交按钮时获取选中的单选按钮的值：

<form>
  <ul>
    <li><input type="radio" name="fruit" value="apple">苹果</li>
    <li><input type="radio" name="fruit" value="banana">香蕉</li>
    <li><input type="radio" name="fruit" value="orange">橙子</li>
  </ul>
  <button type="submit">提交</button>
</form>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
  $('form').submit(function(event) {
    event.preventDefault();
    var fruit = $('input[name="fruit"]:checked').val();
    alert('你选择了 ' + fruit);
  });
</script>

该示例首先使用 $ 函数选择表单，然后使用 submit() 函数为表单绑定提交事件。在该事件处理程序中，使用 event.preventDefault() 函数防止表单提交到服务器。然后，使用之前介绍的代码获取选中的单选按钮的值，并使用 alert() 函数将所选水果的名称显示为消息框。

总结

本文介绍了如何使用 jQuery 获取选中的单选按钮的值。首先，我们回顾了单选按钮的 HTML 代码，然后介绍了使用 jQuery 进行选择和获取值的代码。最后，提供了一个完整的示例，演示了如何在表单提交事件中获取所选单选按钮的值。希望这篇文章能帮助你更好地理解和使用 jQuery。