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 DOM 学习第七章 表单的扩展
Feb 19 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
Apr 01 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
Feb 28 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 06 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 Javascript
详解Vue中的自定义指令
Dec 07 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
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
php class类的用法详细总结
2013/10/17 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
PHP中PDO连接数据库中各种DNS设置方法小结
2016/05/13 PHP
JavaScript国旗变换效果代码
2008/08/13 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
2013/02/01 Javascript
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
python+selenium+Chrome options参数的使用
2020/03/18 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
银河香水:Galaxy Perfume
2019/03/25 全球购物
介绍一下常见的木马种类
2014/11/15 面试题
Python面试题集
2012/03/08 面试题
海南地接欢迎词
2014/01/14 职场文书
危货运输企业安全生产责任书
2014/07/28 职场文书
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
周末问候语大全
2015/11/10 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript