管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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>

教程首页 更多教程