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 相关文章推荐
window.onload与$(document).ready()的区别分析
May 30 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
Dec 28 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
Vue2.0 vue-source jsonp 跨域请求
Aug 04 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
Vue实现6位数密码效果
Aug 18 Javascript
详解Angular模板引用变量及其作用域
Nov 23 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 Javascript
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
PHP写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
Node.js事件的正确使用方法
2019/04/05 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
python使用三角迭代计算圆周率PI的方法
2015/03/20 Python
全面了解python字符串和字典
2016/07/07 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
Python数据集切分实例
2018/12/08 Python
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
婚礼新郎父母答谢词
2014/01/16 职场文书
美容院营销方案
2014/03/05 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python
CentOS安装Nginx并部署vue
2022/04/12 Servers