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 相关文章推荐
jQuery Real Person验证码插件防止表单自动提交
Nov 06 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 Javascript
小谈angular ng deploy的实现
Apr 07 Javascript
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调用.NET的WebService 简单实例
2015/03/27 PHP
关于jquery css的使用介绍
2013/04/18 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
移动手机APP手指滑动切换图片特效附源码下载
2015/11/30 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
2021/01/07 Javascript
Python实现LRU算法的2种方法
2015/06/24 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
python 对象和json互相转换方法
2018/03/22 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
美国社交购物市场:MassGenie
2019/02/18 全球购物
建筑工程技术专业求职信
2014/07/16 职场文书
群众路线领导对照材料
2014/08/23 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
请假条应该怎么写?
2019/06/24 职场文书
Python OpenCV快速入门教程
2021/04/17 Python
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL