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 Study Notes学习笔记 (二)
Aug 04 Javascript
js中eval详解
Mar 30 Javascript
基于jquery实现等比缩放图片
Dec 03 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
在js中做数字字符串补0(js补零)
Mar 25 Javascript
详解如何用模块化的方式写vuejs
Dec 16 Javascript
react中实现搜索结果中关键词高亮显示
Jul 31 Javascript
vue 实现购物车总价计算
Nov 06 Javascript
微信小程序实现吸顶效果
Jan 08 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 Javascript
jQuery实现雪花飘落效果
Aug 02 jQuery
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自带的进位制之间的转换函数
2013/06/08 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
jQuery 获取对象 定位子对象
2010/05/31 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
为输入框加入数字js校验代码分享
2017/11/02 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
webpack v4 从dev到prd的方法
2018/04/02 Javascript
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
vue-resourc发起异步请求的方法
2020/02/11 Javascript
js实现坦克大战游戏
2020/02/24 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
pytorch 求网络模型参数实例
2019/12/30 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
在C语言中实现抽象数据类型什么方法最好
2014/06/26 面试题
介绍一下.net和Java的特点和区别
2012/09/26 面试题
招聘与培训专员岗位职责
2014/01/30 职场文书
给孩子的新年寄语
2014/04/08 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
交通事故一次性赔偿协议书范本
2014/11/02 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书