jquery統(tǒng)計用戶選中的復選框的個數(shù)

2019-11-20 14:48:29

字體：大中小

來源：轉載

供稿：網(wǎng)友

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

使用選擇器得到所有被勾選的復選框元素的集合，然后通過判斷元素的個數(shù)來得到用戶勾選的個數(shù)。

有的時候，我們還對用戶勾選復選框的個數(shù)做了限制，假設只能勾選三個，相應的代碼是這樣的：

復制代碼代碼如下:

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