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>