用JavaScript限制checkbox复选框最大可选项的方法

飞速资源网| http://www.ff70.com |网页设计|人气:688次| 06-11

用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复选框最大可选项的方法》网页设计,网页设计教程,网页设计知识不错，可以推荐给好友哦。

本文Tags： 电脑教学 - 网页设计,网页设计教程,网页设计知识,

相关网页设计文章

·上一篇：仿网易163邮箱万年历源代码下载
› 利用javascript进行进制转换的方法
› 利用JavaScript获取屏幕分辨率的方法
› 用JavaScript实现类似MSN窗口震动效果的代码
› 用JavaScript限制checkbox复选框最大可选项的方法
› 用JavaScript计算出文字Unicode编码的方法
› 用JavaScript防止网站被挂IFRAME木马的方法
中查找"用JavaScript限制checkbox复选框最大可选项的方法"更多相关内容
中查找"用JavaScript限制checkbox复选框最大可选项的方法"更多相关内容
在soso中搜索相关文章：用JavaScript限制checkbox复选框最大可选项的方法
在搜狗中搜索相关文章：用JavaScript限制checkbox复选框最大可选项的方法

网页设计推荐