js限制checkbox选中个数以限制六个为例


Posted in Javascript onJuly 15, 2014

今天在做项目时,碰到一个问题,我需要展示多个checkbox复选框,而只能允许最多选6个。调试了老半天,终于出来了,代码如下:

<SCRIPT LANGUAGE="JavaScript"> 
var c=0,limit=6; 
function doCheck(obj) { 
obj.checked?c++:c--; 
if(c>limit){ 
obj.checked=false; 
alert("over"); 
c--; 
} 
} 
</SCRIPT> 
<html> 
<body> 
<input type="CHECKBOX" name="sample1" onClick="doCheck(this)">A 
<input type="CHECKBOX" name="sample2" onClick="doCheck(this)">B 
<input type="CHECKBOX" name="sample3" onClick="doCheck(this)">C 
<input type="CHECKBOX" name="sample4" onClick="doCheck(this)">D 
<input type="CHECKBOX" name="sample5" onClick="doCheck(this)">E 
<input type="CHECKBOX" name="sample6" onClick="doCheck(this)">F 
<input type="CHECKBOX" name="sample7" onClick="doCheck(this)">G 
<input type="CHECKBOX" name="sample8" onClick="doCheck(this)">H 
<input type="CHECKBOX" name="sample9" onClick="doCheck(this)">I 
<input type="CHECKBOX" name="sample10" onClick="doCheck(this)">J 
</body> 
</html>

展示结果如下:
js限制checkbox选中个数以限制六个为例

Javascript 相关文章推荐
javascript编程起步(第五课)
Jan 10 Javascript
javascript 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 Javascript
js 监控iframe URL的变化实例代码
Jul 12 Javascript
js实现省市级联效果分享
Aug 10 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
vue项目打包部署到服务器的方法示例
Aug 27 Javascript
详解es6新增数组方法简便了哪些操作
May 09 Javascript
JavaScript键盘事件响应顺序详解
Sep 30 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 27 Javascript
vue的项目如何打包上线
Apr 13 Vue.js
js用typeof方法判断undefined类型
Jul 15 #Javascript
js的image onload事件使用遇到的问题
Jul 15 #Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
Jul 14 #Javascript
js拼接html注意问题示例探讨
Jul 14 #Javascript
JQuery中使用ajax传输超大数据的解决方法
Jul 14 #Javascript
在Ubuntu上安装最新版本的Node.js
Jul 14 #Javascript
Express作者TJ告别Node.js奔向Go
Jul 14 #Javascript
You might like
PHP循环语句笔记(foreach,list)
2011/11/29 PHP
php实现zip文件解压操作
2015/11/03 PHP
PHP微信支付开发实例
2016/06/22 PHP
利用php生成验证码
2017/02/23 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
JQuery跳出each循环的方法
2015/04/16 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
vue项目中实现的微信分享功能示例
2019/01/21 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
Python求解任意闭区间的所有素数
2018/06/10 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
python的常用模块之collections模块详解
2018/12/06 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
请解释在new与override的区别
2012/10/29 面试题
管理失职检讨书
2014/02/12 职场文书
社区健康教育实施方案
2014/03/18 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
教师先进个人材料
2014/12/17 职场文书
房屋认购协议书
2015/01/29 职场文书
客房服务员岗位职责
2015/02/09 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
暂住证证明
2015/06/19 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
升职自荐书
2019/05/09 职场文书
在js中修改html body的样式
2021/11/11 Javascript
SQL Server中锁的用法
2022/05/20 SQL Server