限制复选框的最大可选数


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 相关文章推荐
自适应图片大小的弹出窗口
Jul 27 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
javascript动画算法实例分析
Jul 31 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 Javascript
ES6教程之for循环和Map,Set用法分析
Apr 10 Javascript
bootstrap基本配置_动力节点Java学院整理
Jul 14 Javascript
JS模拟实现哈希表及应用详解
May 04 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 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去除数组中重复数据
2014/11/18 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
WordPress中编写自定义存储字段的相关PHP函数解析
2015/12/25 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
JavaScipt基本教程之前言
2008/01/16 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
JQuery球队选择实例
2015/05/18 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
python用字典统计单词或汉字词个数示例
2014/04/22 Python
Python的Flask框架中web表单的教程
2015/04/20 Python
Python实现的knn算法示例
2018/06/14 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
Python计算信息熵实例
2020/06/18 Python
python实现图片素描效果
2020/09/26 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
关键字final的用法
2013/10/02 面试题
大学生实习期自我评价范文
2013/10/03 职场文书
自荐信的五个重要部分
2013/10/29 职场文书
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书