JS判断页面上的单选按钮是否选中-优快云博客

本文介绍了一种使用JavaScript改进HTML表单验证的方法，特别关注如何处理不同数量的单选按钮选择情况，包括没有单选按钮、只有一个单选按钮以及多个单选按钮的选择验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[code]
<html>
<head>
<title>test</title>
<script>
function onsubmitTest() {
var flage = false;
var radios = document.forms[0].radio1;
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked == true) {
flage = true;
alert("选择了第" + i + "个单选按钮");
return true;
}
}
if (!flage) {
alert("一个单选按钮都没有选择！");
return false;
}
}
</script>
</head>
<body>
<form name="form1" method="get" action="#" οnsubmit='onsubmitTest();'>
<input type="radio" name="radio1" value="1" id="radio1"><label for='radio1'>单选按钮一</label>
<input type="radio" name="radio1" value="2" id="radio2"><label for='radio2'>单选按钮二</label>
<input type="radio" name="radio1" value="3" id="radio3"><label for='radio3'>单选按钮三</label>
<input type="submit" />
</form>
</body>
</html>
[/code]

修改以后

[code]
<html>
<head>
<title>test</title>
<script>
function onsubmitTest() {
var flage = false;
var radios = document.forms[0].radio1;

// 没有单选按钮的情况
if (typeof radios == 'undefined') {
alert("一个单选按钮都没有！");
}

// 只有一个单选按钮的情况
if (typeof radios.length == 'undefined') {
alert("只有一个单选按钮。");
if (document.forms[0].radio1.checked == true) {
alert("只有一个按钮，已选中");
return true;
} else {
alert("只有一个按钮，没有选中");
return false;
}
} else { // 多于一个单选按钮的情况
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked == true) {
flage = true;
alert("选择了第" + (parseInt(i) + 1) + "个单选按钮");
return true;
}
}
}
if (!flage) {
alert("一个单选按钮都没有被选中！");
return false;
}
}
</script>
</head>
<body>
<form name="form1" method="get" action="#" οnsubmit='onsubmitTest();'>
<input type="radio" name="radio1" value="1" id="radio1"><label for='radio1'>单选按钮一</label>
<input type="radio" name="radio1" value="2" id="radio2"><label for='radio2'>单选按钮二</label>
<input type="radio" name="radio1" value="3" id="radio3"><label for='radio3'>单选按钮三</label>
<input type="submit" />
</form>
</body>
</html>
[/code]