标签：网页设计教程,网页设计知识,http://www.duowen123.com
用JavaScript限制checkbox复选框最大可选项的方法,
在网页中经常有一些复选框给用户进行选择，或者投票等。但是有的时候我们可能只允许用户选择几项，如只允许选择两项，不允许多选，那么这时候就要控制checkbox复选框的最大可选项了，下面就简单介绍这个方法。
此方法的最终效果如下图如示：
这里只允许最多选择2项，当选择到2项时，其他项自动改变为不可用状态，即灰色，用户无法选择。你也可以自己根据情况设置为最多选择3项等，相关源代码如下所示：
<!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=gb2312" />
<title>用JavaScript限制checkbox复选框最大可选项的方法-HTMer.Com</title>
<script language="javascript" type="text/javascript">
var checkedFlag = 0;
var checkMax = 2; //这里为最多可选项数量，2表示最多可选2个，改成3表示最多可选3个
function checkbox(checkbox)
{
var obj = document.getElementsByName("checkbox");
if (checkbox.checked && checkedFlag <= checkMax - 1)
{
checkedFlag ++ ;
if (checkedFlag == checkMax)
{
for (var i = 0; i < obj.length; i ++ )
{
if( ! obj[i].checked)obj[i].disabled = true;
}
}
}
else if ( ! checkbox.checked)
{
for (var j = 0; j < obj.length; j ++ )
{
if( ! obj[j].checked)obj[j].disabled = false;
}
checkedFlag -- ;
}
}
function htmer_chkbox()
{
var obj = document.getElementsByName("checkbox");
for (var i = 0 ; i < obj.length ; i ++ )
{
if (obj[i].checked || obj[i].disabled)
{
obj[i].checked = false;
obj[i].disabled = false;
}
}
}
</script>
</head>
<body onLoad="htmer_chkbox();">
请选择（最多可选2项）<br />
htmer1 <input type="checkbox" value="1" name="checkbox" onClick="checkbox(this);"/>
htmer2 <input type="checkbox" value="2" name="checkbox" onClick="checkbox(this);"/>
htmer3 <input type="checkbox" value="3" name="checkbox" onClick="checkbox(this);"/>
htmer4 <input type="checkbox" value="4" name="checkbox" onClick="checkbox(this);"/>
htmer5 <input type="checkbox" value="5" name="checkbox" onClick="checkbox(this);"/>
</body>
</html>，用JavaScript限制checkbox复选框最大可选项的方法
