当前位置: 移动技术网 > IT编程>开发语言>JavaScript > 限制复选框的最大可选数

限制复选框的最大可选数

2019年07月31日  | 移动技术网IT编程  | 我要评论
<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>

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网