JS判断radio是否为空

JavaScript验证radio选择

原创已于 2022-02-27 10:44:10 修改 · 842 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2022-02-27 10:23:33 首次发布

这段代码展示了如何使用JavaScript来检查HTML中的radio按钮是否为空。如果用户没有选择任何一个radio选项，函数会返回错误信息提示用户必须选择。该代码适用于网页表单验证，确保用户输入完整。

JS判断radio是否为空

代码：

<html>
<head>
<script type="text/javascript">
function Alert()
{
	var a =0; 
    var n = document.getElementById("name").value;       
    let type = document.getElementsByName("usertype");
    let value;
    for (let index in type) {
		if (type[index].checked) {
				value = type[index].value;
				break;
		}
	} 
    if(n=="")
    	return "请输入姓名!!!";
    if (value == null)
    	return "请选择类型!!!";
}
</script>
</head>
<body>
<input id="name" type="text" placeholder="请输入姓名"><br>
<input type="radio" name="usertype" value="student" id="student">学生<br>
<input type="radio" name="usertype" value="teacher" id="teacher">老师<br>
<input type="radio" name="usertype" value="administrator" id="administrator">管理员<br>
<button value="submit" onclick="document.getElementById('alert').innerHTML=Alert()">提交</button>
<p id="alert" style="color:red"></p>
<br>

</body>
</html>