例如,要实现如下功能:
对页面中的10个复选框,要求限制最多只能勾选3个,否则就灰掉所有复选框。
注:用户再次勾掉复选框时,可以再次选择。
将可变的部分设置为JS的参数,以实现代码复用。
1,js代码
第一个参数为复选框的name,第二个参数为最多允许的勾选值。
<script> 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>
例子:
<!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>限定复选框选择个数-www.jb200.com</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>您可能感兴趣的文章: