限制复选框的最大可选数


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的给文章加入关键字链接
Oct 26 Javascript
一个简单的js树形菜单
Dec 09 Javascript
判断文件是否正在被使用的JS代码
Dec 21 Javascript
jquery单行文字向上滚动效果示例
Mar 06 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
Apr 29 Javascript
jQuery EasyUI 获取tabs的实例解析
Dec 06 Javascript
Vue2.0 UI框架ElementUI使用方法详解
Apr 14 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
Apr 04 Javascript
js this 绑定机制深入详解
Apr 30 Javascript
Vue性能优化的方法
Jul 30 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/03/06 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
jquery 防止表单重复提交代码
2010/01/21 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
怎么清空javascript数组
2013/05/11 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
vue+element+Java实现批量删除功能
2019/04/08 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
Python字典数据对象拆分的简单实现方法
2017/12/05 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
完美解决python3.7 pip升级 拒绝访问问题
2019/07/12 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
部署Django到阿里云服务器教程示例
2020/06/03 Python
移动通信行业实习自我鉴定
2013/09/28 职场文书
校园招聘策划书
2014/01/09 职场文书
参观考察邀请函范文
2014/01/29 职场文书
2014年社会实践活动总结范文
2014/04/29 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
护士自荐信怎么写
2015/03/06 职场文书
幼儿园门卫安全责任书
2015/05/08 职场文书
手写实现JS中的new
2021/11/07 Javascript
python数据处理之Pandas类型转换
2022/04/28 Python