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

发布于 2016-10-07 07:56:38 | 142 次阅读 | 评论: 0 | 来源: 网友投递

jQuery javascript框架

jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。

使用选择器得到所有被勾选的复选框元素的集合，然后通过判断元素的个数来得到用户勾选的个数,需要的朋友可以参考下

 
<!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>

最新网友评论 共有(0)条评论发布评论返回顶部

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

jQuery javascript框架

后端技术

前端技术

数据库

热门框架

常用IDE

其他