限制复选框的最大可选数


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 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
Mar 09 Javascript
浅谈 Vue v-model指令的实现原理
Jun 08 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 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
php5 图片验证码实现代码
2009/12/11 PHP
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
JS 数字转换研究总结
2013/12/26 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
vue使用axios上传文件(FormData)的方法
2019/04/14 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
python开发之函数定义实例分析
2015/11/12 Python
Django接受前端数据的几种方法总结
2016/11/04 Python
Python中%r和%s的详解及区别
2017/03/16 Python
Python3 操作符重载方法示例
2017/11/23 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
在Python中分别打印列表中的每一个元素方法
2018/11/07 Python
python实现一行输入多个值和一行输出多个值的例子
2019/07/16 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
前台接待岗位职责
2013/12/03 职场文书
小学母亲节活动方案
2014/03/14 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
民事上诉状范文
2015/05/22 职场文书
创业计划书之冷饮店
2019/09/27 职场文书