JavaScript限定復選框的選擇個數示例代碼

更新時間：2013年08月25日 12:21:20 作者：

有10個復選框，用戶最多只能勾選3個，否則就灰掉所有復選框，具體實現思路及代碼如下，感興趣的朋友可以參考下，希望對大家有所幫助

有10個復選框，用戶最多只能勾選3個，否則就灰掉所有復選框。
（用戶再次勾掉復選框時，仍然可以再次選擇。）
將可變的部分設置為JS的參數，以實現代碼復用。

JS代碼
第一個參數為復選框的name，第二個參數為最多允許的勾選值。

 
function choicetest(name,num){ 
var choicearr = document.getElementsByName(name); 
var a=0; 
for(var i=0;i<choicearr.length;i++) 
if(choicearr[i].checked){ 
a=a+1; 
} 
if(a==num){ 
for(var i=0;i<choicearr.length;i++) 
if(!choicearr[i].checked) 
choicearr[i].disabled='disabled'; 
}else{ 
for(var i=0;i<choicearr.length;i++) 
choicearr[i].removeAttribute('disabled'); 
} 
} 

范例程序

復制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>無標題文檔</title> 
</head> 
<script language="javascript"> 
function choicetest(name,num){ 
var choicearr = document.getElementsByName(name); 
var a=0; 
for(var i=0;i<choicearr.length;i++) 
if(choicearr[i].checked){ 
a=a+1; 
} 
if(a==num){ 
for(var i=0;i<choicearr.length;i++) 
if(!choicearr[i].checked) 
choicearr[i].disabled='disabled'; 
}else{ 
for(var i=0;i<choicearr.length;i++) 
choicearr[i].removeAttribute('disabled'); 
} 
} 
</script> 
<body > 
<div width="513" onclick="choicetest('choice',3)" > 
<label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>選擇1 
<label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>選擇2 
<label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>選擇3 
<label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>選擇4 
<label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>選擇5 
<p></p> 
<label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>選擇6 
<label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>選擇7 
<label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>選擇8 
<label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>選擇9 
<label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>選擇10 
</div> 
</body> 
</html> 