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 相关文章推荐
JavaScript中“+=”的应用
Feb 02 Javascript
使用jQuery模板来展现json数据的代码
Oct 22 Javascript
JS实现CheckBox复选框全选全不选功能
May 06 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 Javascript
element-ui表格数据转换的示例代码
Aug 24 Javascript
详解vuex 渐进式教程实例代码
Nov 27 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
js实现图片实时时钟
Jan 15 Javascript
你不知道的 TypeScript 高级类型(小结)
Aug 28 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
php a simple smtp class
2007/11/26 PHP
php读取msn上的用户信息类
2008/12/05 PHP
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
深入浅析react native es6语法
2015/12/09 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
Bootstrap select多选下拉框实现代码
2016/12/23 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
2018/08/07 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
python 判断自定义对象类型
2009/03/21 Python
Python生成器(Generator)详解
2015/04/13 Python
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
python方向键控制上下左右代码
2018/01/20 Python
Python类的动态绑定实现原理
2020/03/21 Python
python如何安装下载后的模块
2020/07/03 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
实习生的自我评价
2014/01/08 职场文书
行政人事岗位职责
2014/03/17 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
2014年库房工作总结
2014/11/26 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
家装电话营销开场白
2015/05/29 职场文书
青年志愿者活动感想
2015/08/07 职场文书