改善用户体验之checkbox表单(最多可以选择三个) -- [表单特效]─ 深山工作室提供网络投票系统|微信公众号投票|微信公众号小程序|抖音小程序|百度小程序|微信公众号开发|企业网站建设

改善用户体验之checkbox表单(最多可以选择三个)

网络 2010/2/9 14:44:31 深山行者字体:大中小浏览 15943

以下为详细代码

<!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=utf-8" />
<style type="text/css">
body{ margin:0px; padding:16px;}
form{ margin:0px; padding:0px;}
dl{ margin:0px; padding:0px;}
dt{ margin:0px; padding:26px 0px 6px; font-size:14px; font-weight:bold;}
dd{ margin:0px; padding:0px; font-size:14px; vertical-align:middle;}
label{ cursor:pointer;}
</style>
<title>改善用户体验之checkbox</title>
</head>

<body>
<form action="?">
    <dl>
      <dt>你经常使用哪些邮箱？（不超过3个）</dt>
      <dd>
        <input type="checkbox" id="c1" name="mail" /><label for="c1">Gmail</label> 
        <input type="checkbox" id="c2" name="mail" /><label for="c2">QQmail</label> 
        <input type="checkbox" id="c3" name="mail" /><label for="c3">网易邮箱</label> 
        <input type="checkbox" id="c4" name="mail" /><label for="c4">搜狐邮箱</label> 
        <input type="checkbox" id="c5" name="mail" /><label for="c5">Hotmail</label> 
        <input type="checkbox" id="c6" name="mail" /><label for="c6">新浪邮箱</label>
        <input type="checkbox" id="c7" name="mail" /><label for="c7">企业邮局</label>  
        <input type="checkbox" id="c8" name="mail" /><label for="c8">其它</label>      
      </dd>
      <dt>你经常使用哪些IM工具？（不超过4个）</dt>
      <dd>
        <input type="checkbox" id="m1" name="im" /><label for="m1">QQ</label> 
        <input type="checkbox" id="m2" name="im" /><label for="m2">MSN</label> 
        <input type="checkbox" id="m3" name="im" /><label for="m3">GTalk</label> 
        <input type="checkbox" id="m4" name="im" /><label for="m4">网易泡泡</label> 
        <input type="checkbox" id="m5" name="im" /><label for="m5">校内通</label> 
        <input type="checkbox" id="m6" name="im" /><label for="m6">新浪UC</label>
        <input type="checkbox" id="m7" name="im" /><label for="m7">移动飞信</label>  
        <input type="checkbox" id="m8" name="im" /><label for="m8">其它</label>      
      </dd>
    </dl>
</form>
<script language="javascript" type="text/javascript">
function chkCheckBox(obj){ 
    var result=0;
    if(obj.length){ 
        for(var i=0;i<obj.length;i++){ 
            if(obj[i].checked){ 
                result++;
            } 
        } 
    }else{ 
        result=obj.checked?1:0; 
    } 
    return result;
}
function chknum(name,n){
   var obj=getBox(name);
   for(var i=0;i<obj.length;i++){
	     obj[i].onclick=function(){
		    if(chkCheckBox(obj)>n-1){disCheckBox(obj,1);}else{disCheckBox(obj)}
		 }
	}
}
function disCheckBox(obj,type){
  for(var i=0;i<obj.length;i++){
    if(!obj[i].checked){if(type){obj[i].disabled=true;}else{obj[i].disabled=false;}}
  }
}
function getBox(name){
  var input=document.getElementsByTagName("input");
  var r=[];
  for(var i=0;i<input.length;i++){
      if(input[i].getAttribute("name")==name){
	  r.push(input[i]);
	  }
  }
  return r;
}
chknum("mail",3);
chknum("im",4);
</script>
</body>
</html>

前一页:Javascript JS 限制复选框的选择个数(2)

后一页:点击复选框自动写入textarea,去掉自动删掉,适合做(网站来源,网站作者)

相关阅读: document对象详解; 深山行者留言系统V3.1; 倒计时广告/始终保持在网页中部; 服务器iis配置.mp4视频格式播放(网页播放.mp4有声音但没有图像画面); asp过滤所有html标签; 简单Asp图片验证码,收集大概35种各种各样图片样式验证码，还有语音验证码; 微软Encoder加密解密函数; 超级实用且不花哨的js代码大全( 1 )

更多信息>>栏目类别选择: 百度小程序开发; 微信小程序开发; 微信公众号开发; uni-app; asp函数库; ASP; DIV+CSS; HTML; python

更多>>同类信息: input文本输入框只能输入数字或字母或汉字等; 用于深山在线投票的一个javascript统计checkbox现在选中的个数一边点复选框一边验证并计算现在选了多少个复选框; 利用javascript简短功能就可以检查form表单中的元素是否已经填写; javascript日期验证比较; javascript 根据汉字拼音首字母快速定位下拉列表; javascript取汉字拼音首字母缩写程序

更多>>最新添加文章: dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT; Android移动端自动化测试：使用UIAutomatorViewer与Selenium定位元素; 抖音直播音挂载小雪花懂车帝小程序; javascript获取浏览器指纹可以用来做投票; 火狐Mozilla Firefox出现：无法载入您的Firefox配置文件它可能已经丢失或是无法访问问题解决集合处理办法; 在Android、iOS、Windows、MacOS中微信小程序的文件存放路径; python通过代码修改pip下载源让下载库飞起; python里面requests.post返回的res.text还有其它的吗

更多>>随机抽取信息: python错误yntaxError: Non-UTF-8 code starting with '\xd3' in file 文件.py but no encoding declared; 超级经典一套鼠标控制左右滚动图片带自动翻滚; 网页中Flash弹出网页窗口的详细讲解; asp怎么得到像论坛一样的第几楼分页; 关于网页中pt和px的单位换算！; 8种Python字符串拼接的方法，你知道几种

更多标签热门标签

静态渐变字体超出中英 document 分开 163 pt DW 事务 FlashFxp 模板 max 虚拟留言板模版按钮 strong 参数 asasds 深山行者V1.2旅行社网站管理系统增高左右全 input 蜘蛛 jpg outerHTML 效果 xml 缩略图 option ctrl 规则 exe 文件 DropShadow 数据做标十字调用展开关闭建立日期 csss 理想 Google ajax 位置页面 submit mssql