Js实现checkbox可选个数的限制

最新推荐文章于 2019-03-06 10:21:45 发布

angel21li

最新推荐文章于 2019-03-06 10:21:45 发布

阅读量594

点赞数

文章标签： input function im xhtml javascript c

本文链接：https://blog.csdn.net/angel21li/article/details/5644852

版权

<!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|www.abaonet.com|</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].οnclick=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>

angel21li

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js实现checkbox可选个数的限制

<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=ut
复制链接

扫一扫