📅 最后修改于: 2023-12-03 14:57:17.665000 🧑 作者: Mango
在开发中，我们经常需要获取用户选择的单选框的值。这篇文章将介绍如何使用 jQuery 来获取选中的单选按钮的值。
首先，我们需要一个 HTML 页面，其中包含单选按钮的列表。下面是一个例子，它包含三个选项：
<form>
<input type="radio" name="color" value="red" id="red">
<label for="red">Red</label>
<input type="radio" name="color" value="green" id="green">
<label for="green">Green</label>
<input type="radio" name="color" value="blue" id="blue">
<label for="blue">Blue</label>
</form>
接下来，我们需要使用 jQuery 来获取选中的单选按钮的值。我们可以使用 :checked 选择器来获取选中的单选按钮，然后使用 .val() 方法来获取其值。以下是示例代码：
var selectedValue = $("input[name='color']:checked").val();
在上述代码中，我们使用了 $ 函数来选中所有 name 属性为 "color" 的单选按钮，然后使用 :checked 选择器筛选选中的按钮。最后，我们使用 .val() 方法获取选中单选按钮的值并将其存储在变量 selectedValue 中。
以下是完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Get Value of Checked Radio Button jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("input[name='color']").on("click", function() {
var selectedValue = $("input[name='color']:checked").val();
alert("You selected " + selectedValue);
});
});
</script>
</head>
<body>
<form>
<input type="radio" name="color" value="red" id="red">
<label for="red">Red</label>
<input type="radio" name="color" value="green" id="green">
<label for="green">Green</label>
<input type="radio" name="color" value="blue" id="blue">
<label for="blue">Blue</label>
</form>
</body>
</html>
在上述代码中，我们添加了一个点击事件处理程序，以响应单选按钮的点击事件。当用户单击单选按钮时，我们获取选中的单选按钮的值，并将其显示在 alert 窗口中。
到这里，我们已经学会了如何使用 jQuery 获取选中的单选按钮的值。这是一个简单而常用的技巧，可以在很多场合中使用。