单选按钮 设置required属性无法进行非空验证

先看代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo</title>
	<style>
		input[type="submit"]{
			width: 120px;
			height: 40px;
			border: 0;
			background-color: antiquewhite;
		}
		input[type="submit"]:hover{
			background-color: beige;
		}
	</style>
</head>
<body>
	<form action="#" method="post">
		<label><input type="radio" required />高中</label>
		<label><input type="radio" required />大专</label>
		<label><input type="radio" required />本科</label>
		<label><input type="radio" required />硕士研究生</label>
		<label><input type="radio" required />博士及以上</label>
		<br />
		<input type="submit" value="提交" />
	</form>
</body>
</html>

提交数据时并没有进行非空验证。

正确代码为：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo</title>
	<style>
		input[type="submit"]{
			width: 120px;
			height: 40px;
			border: 0;
			background-color: antiquewhite;
		}
		input[type="submit"]:hover{
			background-color: beige;
		}
	</style>
</head>
<body>
	<form action="#" method="post">
		<label><input type="radio" name="q1" required />高中</label>
		<label><input type="radio" name="q1" required />大专</label>
		<label><input type="radio" name="q1" required />本科</label>
		<label><input type="radio" name="q1" required />硕士研究生</label>
		<label><input type="radio" name="q1" required />博士及以上</label>
		<br />
		<input type="submit" value="提交" />
	</form>
</body>
</html>

原因：

单项选择的实现是通过对多个单选按钮设置同样的name属性值和不同的选项值。例如，使用两个单选按钮，设置这两个控件的name值为sex，选项值一个为女，一个为男，从而实现从性别中选择一个的单选功能。

单选按钮有一个重要的属性checked，用来设置或返回单选按钮的状态。一组name值相同的单选按钮中，如果其中一个按钮的checked属性被设置为true，则其他按钮的checked属性值就默认为false。