HTMer » 编程开发 » 用JavaScript限制checkbox复选框最大可选项的方法

用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>
顶一下 ▲()   踩一下 ▼()

相关文章