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实现购物车多物品数量的加减+总价计算
Jun 06 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
JavaScript常用数组算法小结
Feb 13 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
Sep 27 Javascript
Vue.js样式动态绑定实现小结
Jan 24 Javascript
C#程序员入门学习微信小程序的笔记
Mar 05 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 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
Terran兵种介绍
2020/03/14 星际争霸
超级简单的发送邮件程序
2006/10/09 PHP
php下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
php自动获取目录下的模板的代码
2010/08/08 PHP
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
php文件怎么打开 如何执行php文件
2011/12/21 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
Bootstrap入门教程一Hello Bootstrap初识
2017/03/02 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
带你了解python装饰器
2017/06/15 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Windows下python3.6.4安装教程
2018/07/31 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
Python autoescape标签用法解析
2020/01/17 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
SQL Server笔试题
2012/01/10 面试题
大学学习生活感言
2014/01/18 职场文书
工程专业应届生求职信
2014/02/19 职场文书
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
作风转变年心得体会
2014/10/22 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python