js實現多個checkbox至少選擇一個的判斷

最近遇到多個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>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章