限制复选框的最大可选数


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 相关文章推荐
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
js动态给table添加/删除tr的方法
Aug 02 Javascript
JavaScript中实现map功能代码分享
Jun 11 Javascript
几句话带你理解JS中的this、闭包、原型链
Sep 26 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
jQuery插件ContextMenu自定义图标
Mar 15 Javascript
node.js中express中间件body-parser的介绍与用法详解
May 23 Javascript
react native 获取地理位置的方法示例
Aug 28 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 Javascript
javascript实现简单页面倒计时
Mar 02 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基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
js判断一个元素是否为另一个元素的子元素的代码
2012/03/21 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
Python编程之序列操作实例详解
2017/07/22 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
Django框架基础模板标签与filter使用方法详解
2019/07/23 Python
Python二元赋值实用技巧解析
2019/10/25 Python
Anaconda+VSCode配置tensorflow开发环境的教程详解
2020/03/30 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
小学门卫岗位职责
2013/12/17 职场文书
公司授权委托书范文
2014/09/21 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
护理见习报告范文
2014/11/03 职场文书
话题作文之呼唤
2019/12/18 职场文书
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python