限制复选框的最大可选数


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 tools之tabs 选项卡/页签
Jul 25 Javascript
jquery实现按Enter键触发事件示例
Sep 10 Javascript
Jquery 动态循环输出表格具体方法
Nov 23 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
May 12 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
Vue中的组件及路由使用实例代码详解
May 22 Javascript
Angular8路由守卫原理和使用方法
Aug 29 Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 Javascript
three.js 如何制作魔方
Jul 31 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的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
PHP正则匹配日期和时间(时间戳转换)的实例代码
2016/12/14 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
调试php程序的简单步骤
2019/10/04 PHP
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
JavaScript实现的一个日期格式化函数分享
2014/12/06 Javascript
jQuery中element选择器用法实例
2014/12/29 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
JavaScript如何操作css
2020/10/24 Javascript
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
Agoda台湾官网:国内外订房2折起
2018/03/20 全球购物
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
小区消防演习方案
2014/02/21 职场文书
户籍证明模板
2014/09/28 职场文书
新教师个人工作总结
2015/02/06 职场文书
初中语文教学随笔
2015/08/15 职场文书
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
springboot用户数据修改的详细实现
2022/04/06 Java/Android
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers