HTMer
  • 首页
  • 技术
  • 下载
  • 影视
  • 音乐
  • 随笔
首页 / 技术 / 用JavaScript限制checkbox复选框最大可选项的方法

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

技术 • 2008-12-12 11:30:41 • 阅读 2998

在网页中经常有一些复选框给用户进行选择,或者投票等。但是有的时候我们可能只允许用户选择几项,如只允许选择两项,不允许多选,那么这时候就要控制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>
源代码
您可能感兴趣的
JAVA开发中连接Oracle19c多租户PDB时出错的解决方法
今天用JAVA开发连接Oracle19c数据库,提示ORA-12505错误,在网上找到了解决方法,拿来分享。...
技术 • 5年前 • 阅读 1876
随机密码在线生成器
如今的时代,到处都要设置密码,设置的太简单很容易被破解,设置的复杂又比较烧脑,今天整理了一个随机密码在线生成器,可以设置大小写字母、数字、特殊字符、密码长度等,非常方便,拿来分享。...
技术 • 6年前 • 阅读 1701
jsp(JAVA)时时抓取网页内容的方法
今天项目中需要使用jsp来时时远程抓取网页的内容,实现方法比较简单,拿来分享。...
技术 • 6年前 • 阅读 1383
JavaScript实现将人民币小写金额自动转换成大写的方法
今天在项目中遇到一个需求,需要根据用户输入的人民币小写金额自动转换成大写,以免用户再次输入大写金额的麻烦,拿来分享,可以处理整数、小数、负数。...
技术 • 6年前 • 阅读 1874
ASP截取中英文字符串函数
用ASP做网站的时候经常会碰到要截取字符串的情况。ASP中的Len函数不管是中文字符,还是英文字符,统统按一个单位来计算,由于一个中文字符的宽度是一个英文字符宽度的两倍,在中英文混合的情况下字符串实际占用的宽度就不好计算了,如果按照Len函数计算的长度来截取字符串截出来的效果也会长短不一,下面是按照一个汉字相当于两个英文字符来计算字符串长度和截取字符串的代码。...
技术 • 9年前 • 阅读 1911
用Masonry和lazyload插件实现网页瀑布流布局的方法
我们经常能在网上看到很多瀑布流布局的页面,尤其是很多图片网站,例如花瓣网。这种最典型的瀑布流布局,每个元素的宽度是固定的,但图片长度各不相同,于是通过下图这种样子竖着排列了下来,达到了最大的页面空间利用率。...
技术 • 10年前 • 阅读 2020
  • 网页配色表
  • 二维码生成器
  • 整数分区计算器
  • 随机密码生成器
  • 金额大写转换
Copyright © 2023 HTMer.com⋅苏ICP备08003082号-1⋅ 苏公网安备32041202002242⋅Powered By Z-Blog
  • 首页
  • 技术
  • 下载
  • 影视
  • 音乐
  • 随笔
标签
软件技巧 Windows 源代码 主机 Office 浏览器 腾讯 科普资讯 数据库 病毒防护 节日 下载 远程桌面 Google 心情 足球 PS 健康 电影 音乐 百度 Apple 阿里巴巴 Z-Blog 播放器 微信 阿里云盘 VMware
关于我

研究互联网络和电脑应用技术的IT技术网

HTMer简介