HTMer

研究互联网络和电脑应用技术的IT技术网。 (勤奋+智慧→理想)

« 解决Windows XP黑屏并且通过不了WGA正版验证的方法修改cmd命令提示符默认文件夹路径的方法 »

用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>


欢迎转载,转载请注明:转载自HTMer [ http://www.htmer.com/ ]

本文链接地址:http://www.htmer.com/article/490.htm

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

HTMer , Powered By Z-Blog, 苏ICP备08003082号

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载本站内容必须也遵循“署名-非商业用途-保持一致”的创作共用协议.
HTM|HTML|ASP|PHP|JSP|Mysql|SQL|Dreamweaver|Flash|Fireworks|Photoshop|SEO Copyright www.HTMer.com. Some Rights Reserved. English Version