📅  最后修改于: 2023-12-03 15:02:15.986000             🧑  作者: Mango
单选按钮是一种常见的表单元素,它允许用户从给定的一组选项中选择一个选项。在开发中,我们需要获取用户选择的值,以便对其进行进一步处理。本文将介绍如何使用 jQuery 获取选中的单选按钮的值。
假设我们有一个 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,我们可以使用以下代码获取选中的单选按钮的值:
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。