jquery统计用户选中的复选框的个数


Posted in Javascript onJune 06, 2014
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>jquery test</title> 
<script src="jquery-1.11.1.min.js"></script> 
</head> <body> 
<input type="checkbox" name="check" value="one"/>one<br/> 
<input type="checkbox" name="check" value="two"/>two<br/> 
<input type="checkbox" name="check" value="three"/>three<br/> 
<input type="checkbox" name="check" value="four"/>four<br/> 
<input type="checkbox" name="check" value="five"/>five<br/> 
<input type="checkbox" name="check" value="six"/>six<br/> 
<input type="checkbox" name="check" value="seven"/>seven<br/> 
<button name="sub">提交</button> 
<script type="text/javascript"> 
$("button[name=sub]").click(function(){ 
var len = $("input:checkbox:checked").length; 
alert("你一共选中了"+len+"个复选框"); 
}) 
</script> 
</body> 
</html>

使用选择器得到所有被勾选的复选框元素的集合,然后通过判断元素的个数来得到用户勾选的个数。

有的时候,我们还对用户勾选复选框的个数做了限制,假设只能勾选三个,相应的代码是这样的:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>jquery test</title> 
<script src="jquery-1.11.1.min.js"></script> 
</head> <body> 
<input type="checkbox" name="check" value="one"/>one<br/> 
<input type="checkbox" name="check" value="two"/>two<br/> 
<input type="checkbox" name="check" value="three"/>three<br/> 
<input type="checkbox" name="check" value="four"/>four<br/> 
<input type="checkbox" name="check" value="five"/>five<br/> 
<input type="checkbox" name="check" value="six"/>six<br/> 
<input type="checkbox" name="check" value="seven"/>seven<br/> 
<script type="text/javascript"> 
$("input:checkbox").click(function(){ 
var len = $("input:checkbox:checked").length; 
if(len>3){ 
alert('亲,最多只能选三个哟~'); 
return false; //另刚才勾选的取消 
} 
}) 
</script> 
</body> 
</html>
Javascript 相关文章推荐
jquery固定底网站底部菜单效果
Aug 13 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
jquery实现ajax提交form表单的方法总结
Mar 03 Javascript
BootStrap中Tab页签切换实例代码
May 30 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
May 09 Javascript
JS简单表单验证功能完整示例
Jan 26 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 Javascript
javascript中的throttle和debounce浅析
Jun 06 #Javascript
单击某一段文字改写文本颜色
Jun 06 #Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 #Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
Jun 06 #Javascript
jQuery插件开发详细教程
Jun 06 #Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 #Javascript
jquery进行数组遍历如何跳出当前的each循环
Jun 05 #Javascript
You might like
无线电广播的开始
2002/01/30 无线电
thinkphp缓存技术详解
2014/12/09 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
JavaScript中void(0)的具体含义解释
2007/02/27 Javascript
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
jQuery示例收集
2010/11/05 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
python 字符串常用函数详解
2019/09/11 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
Python3 assert断言实现原理解析
2020/03/02 Python
Python无头爬虫下载文件的实现
2020/04/02 Python
Python实现仿射密码的思路详解
2020/04/23 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
python3让print输出不换行的方法
2020/08/24 Python
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
Omio中国:全欧洲低价大巴、火车和航班搜索和比价
2018/08/09 全球购物
批评与自我批评材料
2014/02/15 职场文书
校庆接待方案
2014/03/18 职场文书
学校对教师的评语
2014/04/28 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
运动会广播稿20字
2015/08/19 职场文书
mysql序号rownum行号实现方式
2022/12/24 MySQL