JavaScript检测并限制复选框选中个数的方法


Posted in Javascript onAugust 12, 2015

本文实例讲述了JavaScript检测并限制复选框选中个数的方法。分享给大家供大家参考。具体如下:

这里用JavaScript判断复选框中否选中,同时可以限制复选框的选中个数,这是一个比较实用的JS表单判断示例,复选框的是否选中曾经让很多人纳闷,现在好了,这段代码帮你解决了难题。

运行效果截图如下:

JavaScript检测并限制复选框选中个数的方法

具体代码如下:

<html>
<head>
<title>判断复选框中否选中</title>
<script>
var check_num = 0;
function check(){ 
 if(event.srcElement.checked==true)
  check_num++;
 else 
  check_num--;   
 if(check_num>3)
 {
  alert("最多只能选3个!");
  event.srcElement.checked=false;
  check_num--;
 }  
}
</script>
</head>
<body>
<input type="checkbox" name="test" onClick="check()">
<input type="checkbox" name="test" onClick="check()">
<input type="checkbox" name="test" onClick="check()">
<input type="checkbox" name="test" onClick="check()">
<input type="checkbox" name="test" onClick="check()">
<input type="checkbox" name="test" onClick="check()">
<input type="checkbox" name="test" onClick="check()">
<br>
你只能选择3个复选框。
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
五个jQuery图片画廊插件 推荐
May 12 Javascript
javascript实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
js获取本机的外网/广域网ip地址完整源码
Aug 12 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
Oct 19 Javascript
JavaScript学习笔记之Function对象
Jan 22 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
js常用的继承--组合式继承
Mar 06 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 Javascript
ionic 3.0+ 项目搭建运行环境的教程
Aug 09 Javascript
Vue2.0用户权限控制解决方案
Nov 29 Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
JavaScript入门基础
Aug 12 #Javascript
js实现将选中值累加到文本框的方法
Aug 12 #Javascript
javascript实现简单的分页特效
Aug 12 #Javascript
JavaScript实现网站访问次数统计代码
Aug 12 #Javascript
jquery+ajax请求且带返回值的代码
Aug 12 #Javascript
javascript封装简单实现方法
Aug 11 #Javascript
基于Css3和JQuery实现打字机效果
Aug 11 #Javascript
You might like
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
分页栏的web标准实现
2011/11/01 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
react-native 完整实现登录功能的示例代码
2017/09/11 Javascript
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
vue中的ref和$refs的使用
2018/11/22 Javascript
VueCli3.0中集成MockApi的方法示例
2019/07/05 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
python连接oracle数据库实例
2014/10/17 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
python中单下划线_的常见用法总结
2018/07/10 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
详解Python中的Lock和Rlock
2021/01/26 Python
TCP/IP的分层模型
2013/10/27 面试题
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
期末考试复习计划
2015/01/19 职场文书
Python 可迭代对象 iterable的具体使用
2021/08/07 Python
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python