您的位置：首页 > Web前端 > JavaScript

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

2018-10-12 13:51 531 查看

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

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航