📅 最后修改于: 2023-12-03 15:38:18.564000 🧑 作者: Mango
在网页表单中，单选按钮是常见的输入方式。但是如何在表单提交前验证单选按钮是否有选中的值呢？在 jQuery 中，我们可以使用以下方法进行单选按钮验证。
首先，我们需要在 HTML 中添加单选按钮。例如，我们创建一个名为 gender 的单选按钮组，其中包含男性和女性两个选项。
<div>
<label>性别：</label>
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
</div>
注意，两个单选按钮的 name 属性必须相同，这样才能组成一个单选按钮组。
接下来，在 jQuery 中编写代码对单选按钮进行验证。在这里，我们使用 $('input[name="gender"]:checked') 来选中已选中的单选按钮。如果 $('input[name="gender"]:checked') 的长度为零，则说明没有单选按钮被选中。
$(document).ready(function() {
$('form').submit(function() {
if ($('input[name="gender"]:checked').length === 0) {
alert('请选择性别');
return false;
}
});
});
这里，我们使用 $('form').submit() 来捕获表单提交事件。如果单选按钮组中没有选中的单选按钮，则弹出提示并返回 false，阻止表单提交。
下面是完整的 HTML 和 jQuery 代码，供参考。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单选按钮验证</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('form').submit(function() {
if ($('input[name="gender"]:checked').length === 0) {
alert('请选择性别');
return false;
}
});
});
</script>
</head>
<body>
<form>
<div>
<label>性别：</label>
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
</div>
<button type="submit">提交</button>
</form>
</body>
</html>
以上就是在 jQuery 中进行单选按钮验证的方法。一个完整的表单验证通常包含多个步骤，比如验证输入框是否为空、验证输入的格式等。希望本文对你有所帮助。