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 相关文章推荐
js替代copy(示例代码)
Nov 27 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
javascript每日必学之封装
Feb 23 Javascript
基于jQuery日历插件制作日历
Mar 11 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 Javascript
js select下拉联动 更具级联性!
Apr 17 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 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配置文件中最常用四个ini函数
2007/03/19 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
lnmp安装多版本PHP共存的方法详解
2018/08/02 PHP
Yii2框架操作数据库的方法分析【以mysql为例】
2019/05/27 PHP
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
JSON+JavaScript处理JSON的简单例子
2013/03/20 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
JavaScript常用工具方法封装
2019/02/12 Javascript
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python字符串拼接六种方法介绍
2017/12/18 Python
python+Selenium自动化测试——输入,点击操作
2020/03/06 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
活动邀请函范文
2014/01/19 职场文书
幼儿园优秀教师事迹
2014/02/13 职场文书
机械工程师岗位职责
2014/06/16 职场文书
离职证明范本
2015/06/12 职场文书
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android