欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

限制复选框的最大可选数

程序员文章站 2022-07-11 18:36:30
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>html-www.51windows.net</title>
</head>
<body>
<script language="javascript">
<!--
//checkbox元素的名字前缀,本例为sample1,sample2,sample3...
var sctrlprefix = "sample";
//checkbox元素数量,本例有18个;
var imaxcheckbox = 18;
//设置最大允许选择的数量;
var imaxselected = 5;

function docheck(ctrl) {
var inumchecked = 0;
var thisctrl;
var i;

//初始化
i = 1;
//循环直到选中了最多的checkbox;
while ((i <= imaxcheckbox) && (inumchecked <= imaxselected)) {

thisctrl = eval("ctrl.form." + sctrlprefix + i);

if ((thisctrl != ctrl) && (thisctrl.checked)) {

inumchecked++;
}

i++;
}

// 检查是否达到了最大选择数量;
if (inumchecked == imaxselected) {
// 如果是则uncheck刚选择的元素;
ctrl.checked = false;
}
}
// -->
</script>


<form name="form" method="post">
<table align="center" border="1" cellpadding="5" cellspacing="0">
<tr>
<td>
<input type="checkbox" name="sample1" onclick="docheck(this)">
a</td>
<td>
<input type="checkbox" name="sample2" onclick="docheck(this)">
b</td>
<td>
<input type="checkbox" name="sample3" onclick="docheck(this)">
c</td>
</tr>
<tr>
<td>
<input type="checkbox" name="sample4" onclick="docheck(this)">
d</td>
<td>
<input type="checkbox" name="sample5" onclick="docheck(this)">
e</td>
<td>
<input type="checkbox" name="sample6" onclick="docheck(this)">
f</td>
</tr>
<tr>
<td>
<input type="checkbox" name="sample7" onclick="docheck(this)">
g</td>
<td>
<input type="checkbox" name="sample8" onclick="docheck(this)">
h</td>
<td>
<input type="checkbox" name="sample9" onclick="docheck(this)">
i</td>
</tr>
<tr>
<td>
<input type="checkbox" name="sample10" onclick="docheck(this)">
j</td>
<td>
<input type="checkbox" name="sample11" onclick="docheck(this)">
k</td>
<td>
<input type="checkbox" name="sample12" onclick="docheck(this)">
l</td>
</tr>
<tr>
<td>
<input type="checkbox" name="sample13" onclick="docheck(this)">
m</td>
<td>
<input type="checkbox" name="sample14" onclick="docheck(this)">
n</td>
<td>
<input type="checkbox" name="sample15" onclick="docheck(this)">
o</td>
</tr>
<tr>
<td>
<input type="checkbox" name="sample16" onclick="docheck(this)">
p</td>
<td>
<input type="checkbox" name="sample17" onclick="docheck(this)">
q</td>
<td>
<input type="checkbox" name="sample18" onclick="docheck(this)">
r</td>
</tr>
</table>
</form>
</body>
</html>

<div style="position: absolute; top: 10; right: 10; width: 148; height: 18;cursor:hand">
<input type="button" name="button" value="查看源代码" onclick= 'window.location = "view-source:" + window.location.href'></div>