📅 最后修改于: 2023-12-03 15:16:50.010000 🧑 作者: Mango
在web开发中，我们通常需要获取表单中用户输入的值。无线电按钮是一种常见的表单元素，它允许用户从预定义的选项中进行选择或输入自己的选项。
本文将介绍如何使用jQuery获取无线电输入的值。
在HTML代码中，我们需要使用<form>标签和<input type="radio">标签来创建一个无线电按钮。请确保为每个无线电按钮设置唯一的name属性，以便用户只能选择一个选项。以下是HTML代码示例：
<form>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
使用jQuery获取无线电输入的值非常简单。我们可以使用$('input[name=radio_name]:checked').val()来获取选中的无线电按钮的值，其中radio_name是无线电按钮的name属性。
以下是jQuery代码示例：
// 获取选中的无线电按钮的值
var gender = $('input[name=gender]:checked').val();
// 将选中的无线电按钮的值输出到控制台
console.log('Gender: ' + gender);
以下是一个完整的HTML和jQuery代码示例，它将获取选中的无线电按钮的值，并在页面上显示它：
<!DOCTYPE html>
<html>
<head>
<title>jQuery获取无线电输入的值 - Javascript</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
<button id="submit-button">Submit</button>
<div id="result"></div>
<script>
// 当提交按钮被点击时
$('#submit-button').on('click', function() {
// 获取选中的无线电按钮的值
var gender = $('input[name=gender]:checked').val();
// 将选中的无线电按钮的值显示在页面上
$('#result').text('Gender: ' + gender);
});
</script>
</body>
</html>
在这个例子中，当用户单击提交按钮时，我们将获取选中的无线电按钮的值，并在页面上显示它。
在本文中，我们介绍了如何使用jQuery获取无线电输入的值。我们使用了$('input[name=radio_name]:checked').val()来获取选中的无线电按钮的值，其中radio_name是无线电按钮的name属性。这个方法非常简单，希望你会喜欢。