js实现多个checkbox至少选择一个的判断_js 多选题默认至少一个-优快云博客

本文链接：https://blog.youkuaiyun.com/iPerseverance/article/details/46125061

这篇博客记录了如何使用JavaScript实现多个checkbox至少选择一个的验证。博主作为初学者，通过研究解决了这个问题，使用checkbox的id进行操作。如果没有选中一个就尝试提交，系统会弹出提示并阻止提交。此笔记旨在帮助博主个人积累经验。

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

最近遇到多个checkbox至少选中一个才能submit的判定。百度了很久没找到一个简单易懂的，没找到一个能让我看得懂的（本人菜鸟，看不懂大神们的方法）。研究了N久终于用通俗易懂的方法实现。我是用checkbox的id实现的，所以id命名时最好有点规律以方便在for loop里面轻易实现。如果没有选中一个就点击Apply，则会弹出提示，且不会submit。记忆力不好，写此笔记仅做个人经验积累用。

<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Cable Diagnostic</title>
<script>
function CheckBoxChs(){
var obj;
var objYN=false;
var i;
	for(i=1; i <= 8;i++)
	{
		obj = document.getElementById("p"+i+"");
		if(obj.checked==true){
			objYN= true;
			break;
		}
	}
	return objYN;
}

function apply()
{
	if(CheckBoxChs()== false)
	{alert("至少选择一个.");return;}
document.forms[0].submit();
}
</script>
</head>

<body>
<form name="cable" action="" method="post">
	<table cellSpacing="0" border="0">
		<tr vAlign="top"><td width="407"><h1>Cable Diagnostic</h1></td></tr>
	</table>

	<table class="table-middle">
		<tr align="center">
			<td width="60"><b>Check</b></td>
			<td width="80"><b>Port</b></td>
			<td width="80"><b>Test Result</b></td>
			<td width="380"><b>Cable Fault Distance</b></td>
		</tr>
		<SCRIPT>
		var i;
		for(i=1; i <= 8 ;i++)
		{
			document.write("<tr align='center'>");
			document.write("<td><input type='checkbox' id='p"+i+"' name='p"+i+"' value='p"+i+"'></td>");
			document.write("<td><b>"+i+"</b></td>");

			document.write("</tr>");

		}
		</script>
	</table>
<p>
	<table>
		<tr align="center"><td width="625"><input class="button" value="Apply" type="button" onclick="apply()"></td></tr>
	</table>
</form>
</body>
</html>