限制复选框的最大可选数


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 相关文章推荐
认识延迟时间为0的setTimeout
May 16 Javascript
JavaScript入门之事件、cookie、定时等
Oct 21 Javascript
关于jquery性能最佳实践的讨论,与求教
Mar 30 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
原生js事件的添加和删除的封装
Jul 01 Javascript
jquery JSON的解析方式示例介绍
Jul 27 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 Javascript
js 动态校验开始结束时间的实现代码
May 25 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
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
追求程序速度,而不是编程的速度
2008/04/23 PHP
PHP中数组的三种排序方法分享
2012/05/07 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
jQuery 阴影插件代码分享
2012/01/09 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
jquery 操作两个select实现值之间的互相传递
2014/03/07 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
iView框架问题整理小结
2018/10/16 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
2019/07/03 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
Python中的迭代器漫谈
2015/02/03 Python
Python回调函数用法实例详解
2015/07/02 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
python 把列表转化为字符串的方法
2018/10/23 Python
python实现控制台打印的方法
2019/01/12 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
pandas删除指定行详解
2019/04/04 Python
python实现经典排序算法的示例代码
2021/02/07 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
小程序canvas中文字设置居中锚点
2019/04/16 HTML / CSS
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
生日礼品店创业计划书范文
2014/03/21 职场文书
2014年创先争优活动总结
2014/05/04 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
python实现黄金分割法的示例代码
2021/04/28 Python
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android