JavaScript限定复选框的选择个数示例代码

225 阅读 0 评论 149 点赞

我是靠谱客的博主多情保温杯，最近开发中收集的这篇文章主要介绍JavaScript限定复选框的选择个数示例代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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