📅 最后修改于: 2023-12-03 14:55:44.809000 🧑 作者: Mango
在开发 Web 应用程序时，我们通常需要收集用户的输入数据。其中一个常见的输入类型就是单选按钮。jQuery 是一种流行的 JavaScript 库，它提供了很多简化 DOM 操作的方法，使得使用 JavaScript 和 jQuery 来处理单选按钮是一件非常容易的事情。在本文中，我们将介绍如何使用 jQuery 和 JavaScript 来处理单选按钮，并提供一些例子以帮助您更好地了解其用法。
要创建单选按钮，我们需要使用 HTML 标记和属性。以下是一个创建单选按钮的示例：
<input type="radio" name="fruit" value="apple"> Apple<br>
<input type="radio" name="fruit" value="orange"> Orange<br>
<input type="radio" name="fruit" value="banana"> Banana<br>
在上面的示例中，我们使用了 <input> 标记，并使用了 type 属性来指定输入类型为“radio”（单选按钮）。我们还使用了 name 属性来将单选按钮组成一组，并使用了 value 属性定义每个按钮的值。为每个单选按钮添加标签，以便用户可以看到该单选按钮的含义。
现在，我们已经创建了三个单选按钮，但是怎样才能获取用户选择的值呢？答案是使用 JavaScript 和 jQuery。
要获取选中的单选按钮的值，可以使用以下代码：
$("input[name='fruit']:checked").val();
这行代码将返回当前选中的单选按钮的值。它使用 jQuery 的选择器来选择所有 name 属性为 “fruit” 的单选按钮，并过滤掉未选中的按钮。然后，.val() 方法用于获取选中的值。
要通过 JavaScript 或 jQuery 改变选中的单选按钮的值，可以使用以下代码：
$("input[name='fruit'][value='orange']").prop("checked", true);
这行代码将选中 name 属性为 “fruit” 且其 value 属性为 “orange” 的单选按钮。
下面是一个完整的例子，演示了如何创建、获取和更改单选按钮的值：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form>
<input type="radio" name="fruit" value="apple"> Apple<br>
<input type="radio" name="fruit" value="orange"> Orange<br>
<input type="radio" name="fruit" value="banana"> Banana<br>
</form>
<button onclick="getSelectedValue()">Get selected value</button>
<button onclick="changeSelectedValue()">Change selected value to orange</button>
<script>
function getSelectedValue() {
var selectedValue = $("input[name='fruit']:checked").val();
alert("Selected value is " + selectedValue);
}
function changeSelectedValue() {
$("input[name='fruit'][value='orange']").prop("checked", true);
alert("Selected value is " + $("input[name='fruit']:checked").val());
}
</script>
</body>
</html>
在这个例子中，我们创建了一个包含三个单选按钮的表单。然后我们添加了两个按钮：一个用于获取选中的值，另一个用于更改选中的值。 getSelectedValue() 函数用于获取选中的值，而 changeSelectedValue() 函数用于更改选中的值。每次单选按钮更改后，页面将显示当前选中的值。
在本文中，我们介绍了如何使用 jQuery 和 JavaScript 处理单选按钮。我们了解了创建单选按钮、获取选中的值、更改选中的值等知识，并提供了一个例子以帮助您更好地了解其用法。单选按钮是一种非常常见的表单元素，掌握如何处理它们是非常有用的技能。