jquery统计用户选中的复选框的个数
更新时间：2014年06月06日 09:30:07 作者：
使用选择器得到所有被勾选的复选框元素的集合，然后通过判断元素的个数来得到用户勾选的个数,需要的朋友可以参考下
复制代码 代码如下:
<!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>
您可能感兴趣的文章:
- jquery获取复选框被选中的值
- jquery判断checkbox(复选框)是否被选中的代码
- jquery操作复选框(checkbox)的12个小技巧总结
- jquery如何获取复选框的值
- JQUERY复选框CHECKBOX全选,取消全选
- jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
- jquery获取复选框被选中的值
- Jquery获取复选框被选中值的简单方法
- jquery复选框CHECKBOX全选、反选
- jquery实现勾选复选框触发事件给input赋值
- jQuery遍历页面所有CheckBox查看是否被选中的方法
- Jquery遍历checkbox获取选中项value值的方法
- checkbox全选/取消全选以及checkbox遍历jQuery实现代码
- jQuery实现遍历复选框的方法示例
相关文章
这里给大家分享的是使用jQuery实现简单的无缝滚动的效果，其思路是我们通过js控制 ul 标签的margin 来实现滚动。横向滚动则是控制 margin-left ; 纵向滚动则是控制 margin-top;，有需要的小伙伴可以参考下。2015-04-04
这篇文章主要介绍了jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)的关键代码，非常不错，代码简单易懂,需要的朋友可以参考下2016-08-08
UI Layout是一种基于jQuery的布局框架，其核心是一个大小自适应的中心面板，面板的上下左右四个方向可以放置可折叠、可缩放的面板，感兴趣的朋友可以参考下哈2013-04-04
这篇文章主要介绍了jQuery实现的简单在线计算器功能,结合完整实例形式分析了jQuery实现简单四则运算的相关操作技巧,需要的朋友可以参考下2017-05-05
单击单元格选中，选中过程中使用方向键更换选中的单元格，选中过程中按回车键或者直接双击单元格进入可编辑状态，单元格失去焦点时保存修改的内容2012-12-12
这篇文章主要教大家如何快速实现jQuery多级菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要介绍了JQuery分屏指示器图片轮换效果实现方法,实例分析了jQuery图片轮播操作的相关技巧,需要的朋友可以参考下2015-05-05
下面小编就为大家带来一篇jquery实现ajax提交表单信息的简单方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了jQuery实现王者荣耀手风琴效果的代码内容，需要的朋友们可以学习下。2020-01-01
做web开发的朋友都应该掌握前端优化这个技巧，其中一个就是滚动延时加载。这个技巧应用在了很多地方，比如新浪微博网页版。以下就为大家详细介绍，需要的朋友可以参考下2013-07-07
最新评论