限制复选框的最大可选数


Posted in Javascript onJuly 01, 2006

<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>

Javascript 相关文章推荐
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
javascript使用isNaN()函数判断变量是否为数字
Sep 21 Javascript
关于编写性能高效的javascript事件的技术
Nov 28 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
Aug 05 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
Vue项目分环境打包的实现步骤
Apr 02 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 Javascript
vue 清空input标签 中file的值操作
Jul 21 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
Oct 30 Javascript
让innerHTML的脚本也可以运行起来
Jul 01 #Javascript
DEFER怎么用?
Jul 01 #Javascript
让插入到 innerHTML 中的 script 跑起来的实现代码
Jul 01 #Javascript
在网页中控制wmplayer播放器
Jul 01 #Javascript
Javascript的IE和Firefox兼容性汇编
Jul 01 #Javascript
提高代码性能技巧谈—以创建千行表格为例
Jul 01 #Javascript
对textarea框的代码调试,而且功能上使用非常方便,酷
Jun 30 #Javascript
You might like
DC宇宙的第一个英雄,堪称动漫史鼻祖,如今成为美国文化的象征
2020/04/09 欧美动漫
PHP读取目录下所有文件的代码
2008/01/07 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
bootstrap 设置checkbox部分选中效果
2017/04/20 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
2017/12/14 Javascript
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
python分布式环境下的限流器的示例
2017/10/26 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
室内设计专业个人的自我评价
2013/10/19 职场文书
中学生打架检讨书
2014/02/10 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
岗位职责说明书
2014/05/07 职场文书
征兵宣传标语
2014/06/20 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
学校联谊协议书
2014/09/16 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
大学生求职自荐信范文
2015/03/04 职场文书