jquery统计用户选中的复选框的个数
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>jquerytest</title>
<scriptsrc="jquery-1.11.1.min.js"></script>
</head>
<body>
<inputtype="checkbox"name="check"value="one"/>one<br/>
<inputtype="checkbox"name="check"value="two"/>two<br/>
<inputtype="checkbox"name="check"value="three"/>three<br/>
<inputtype="checkbox"name="check"value="four"/>four<br/>
<inputtype="checkbox"name="check"value="five"/>five<br/>
<inputtype="checkbox"name="check"value="six"/>six<br/>
<inputtype="checkbox"name="check"value="seven"/>seven<br/>
<buttonname="sub">提交</button>
<scripttype="text/javascript">
$("button[name=sub]").click(function(){
varlen=$("input:checkbox:checked").length;
alert("你一共选中了"+len+"个复选框");
})
</script>
</body>
</html>
使用选择器得到所有被勾选的复选框元素的集合,然后通过判断元素的个数来得到用户勾选的个数。
有的时候,我们还对用户勾选复选框的个数做了限制,假设只能勾选三个,相应的代码是这样的:
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>jquerytest</title>
<scriptsrc="jquery-1.11.1.min.js"></script>
</head>
<body>
<inputtype="checkbox"name="check"value="one"/>one<br/>
<inputtype="checkbox"name="check"value="two"/>two<br/>
<inputtype="checkbox"name="check"value="three"/>three<br/>
<inputtype="checkbox"name="check"value="four"/>four<br/>
<inputtype="checkbox"name="check"value="five"/>five<br/>
<inputtype="checkbox"name="check"value="six"/>six<br/>
<inputtype="checkbox"name="check"value="seven"/>seven<br/>
<scripttype="text/javascript">
$("input:checkbox").click(function(){
varlen=$("input:checkbox:checked").length;
if(len>3){
alert('亲,最多只能选三个哟~');
returnfalse;//另刚才勾选的取消
}
})
</script>
</body>
</html>
热门推荐
10 出车开工吉祥祝福语简短
11 生日宴祝福语 简短独特
12 对老人新年祝福语简短
13 过年红包祝福语简短霸气
14 新婚贺词祝福语创意简短
15 孙子生日祝福语简短精辟
16 上班祝福语简短10字
17 幽默祝福语押韵简短
18 天仙配简短祝福语