限制复选框的最大可选数


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遍历Json的两种数据结构的实现代码
Jan 19 Javascript
JavaScript 验证码的实例代码(附效果图)
Mar 22 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
jQuery实现防止提交按钮被双击的方法
Mar 24 Javascript
javascript父子页面通讯实例详解
Jul 17 Javascript
JavaScript实现复制文章自动添加版权
Aug 02 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
vue.js利用defineProperty实现数据的双向绑定
Apr 28 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
三种Webpack打包方式(小结)
Sep 19 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 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
一些 PHP 管理系统程序中的后门
2009/08/05 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
js实现DIV的一些简单控制
2007/06/04 Javascript
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
javascript 浏览器检测代码精简版
2010/03/04 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
2013/10/20 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
JS实现的四级密码强度检测功能示例
2017/05/11 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
python验证码识别的实例详解
2016/09/09 Python
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
高效使用Python字典的清单
2018/04/04 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
实习生个人找工作的自我评价
2013/10/30 职场文书
质检员工作总结2015
2015/04/25 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js