| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 737 人关注过本帖
标题:这段代码如何简写?期盼高手指点迷津
只看楼主 加入收藏
jsy110
Rank: 1
等 级:新手上路
帖 子:31
专家分:0
注 册:2008-2-25
结帖率:50%
收藏
 问题点数:0 回复次数:5 
这段代码如何简写?期盼高手指点迷津
这是一个本菜鸟写的一段限制复选框的被选中数量不能超过两项的代码,一共有四组复选框,已在本机测验通过正确无误,但是感觉太繁琐了,能否以循环的形式使下面的代码简化呢? 请各位js高手指点一二,感激不尽... ...

for(i=0;i<document.form1.checkbox1.length;i++)
            {
                document.form1.checkbox1[i].onclick = checkDate;
            }  
function checkDate(checkboxName)
            {
                var checkCount = 0;
                for(i=0;i<document.form1.checkbox1.length;i++)
                {
                    if (document.form1.checkbox1[i].checked)
                    {
                        checkCount ++;
                    }
                }
                if (checkCount>2)
                {
                    alert("每类最多只能选择两项");
                    return false;
                }
            }
               for(i=0;i<document.form1.checkbox2.length;i++)
            {
                document.form1.checkbox2[i].onclick = checkDate2;
            }
function checkDate2(checkboxName)
            {
                var checkCount = 0;
                for(i=0;i<document.form1.checkbox2.length;i++)
                {
                    if (document.form1.checkbox2[i].checked)
                    {
                        checkCount ++;
                    }
                }
                if (checkCount>2)
                {
                    alert("每类最多只能选择两项");
                    return false;
                }
            }
             for(i=0;i<document.form1.checkbox3.length;i++)
            {
                document.form1.checkbox3[i].onclick = checkDate3;
            }
function checkDate3(checkboxName)
            {
                var checkCount = 0;
                for(i=0;i<document.form1.checkbox3.length;i++)
                {
                    if (document.form1.checkbox3[i].checked)
                    {
                        checkCount ++;
                    }
                }
                if (checkCount>2)
                {
                    alert("每类最多只能选择两项");
                    return false;
                }
            }
            
            for(i=0;i<document.form1.checkbox4.length;i++)
            {
                document.form1.checkbox4[i].onclick = checkDate4;
            }
function checkDate4(checkboxName)
            {
                var checkCount = 0;
                for(i=0;i<document.form1.checkbox4.length;i++)
                {
                    if (document.form1.checkbox4[i].checked)
                    {
                        checkCount ++;
                    }
                }
                if (checkCount>2)
                {
                    alert("每类最多只能选择两项");
                    return false;
                }
            }
            for(i=0;i<document.form1.checkbox5.length;i++)
            {
                document.form1.checkbox5[i].onclick = checkDate5;
            }
function checkDate5(checkboxName)
            {
                var checkCount = 0;
                for(i=0;i<document.form1.checkbox5.length;i++)
                {
                    if (document.form1.checkbox5[i].checked)
                    {
                        checkCount ++;
                    }
                }
                if (checkCount>2)
                {
                    alert("每类最多只能选择两项");
                    return false;
                }
            }   
            

[ 本帖最后由 jsy110 于 2010-5-21 11:03 编辑 ]
搜索更多相关主题的帖子: 简写 代码 
2010-05-21 11:00
foktime
Rank: 11Rank: 11Rank: 11Rank: 11
来 自:奥斯维辛
等 级:贵宾
威 望:35
帖 子:795
专家分:2742
注 册:2009-9-4
收藏
得分:0 
程序代码:
    function getEs(name){
        return document.getElementsByName(name);
    }
    for (var j = 1; j < 6; j++) {                            //有几组复选框,j就小于几+1,这里根据你上面的代码 假设是5组
        for (i = 0; i < getEs('checkbox'+j).length; i++) {
            getEs('checkbox' + j)[i].onclick = checkDate;
        }
    }
    function checkDate() {
        var checkCount = 0;
        for (i = 0; i < getEs(this.name).length; i++) {
            if (getEs(this.name)[i].checked) {
                checkCount++;
            }
        }
        if (checkCount > 2) {
            alert("每类最多只能选择两项");
            return false;
        }
    }
html代码里,复选框标签统一这样写
<input id="_Checkbox1" name="checkbox1" type="checkbox" />  //例子
不用document.form1.checkbox1因为浏览器兼容性差 只能ie
2010-05-21 16:33
foktime
Rank: 11Rank: 11Rank: 11Rank: 11
来 自:奥斯维辛
等 级:贵宾
威 望:35
帖 子:795
专家分:2742
注 册:2009-9-4
收藏
得分:0 
附上做测试的例子 你运行一下看看
程序代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. xmlns="http://www. http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>黑客帝国</title>

<body>
<form id="form1" name="form1">
    <input id="_Checkbox1" name="checkbox1" type="checkbox" />
    <input id="_Checkbox2" name="checkbox1" type="checkbox" />
    <input id="_Checkbox3" name="checkbox1" type="checkbox" />
    <input id="_Checkbox4" name="checkbox1" type="checkbox" />
   
    <br />
   
    <input id="_Checkbox5" name="checkbox2" type="checkbox" />
    <input id="_Checkbox6" name="checkbox2" type="checkbox" />
    <input id="_Checkbox7" name="checkbox2" type="checkbox" />
    <input id="_Checkbox8" name="checkbox2" type="checkbox" />
   
    <br />
   
    <input id="Checkbox5" name="checkbox3" type="checkbox" />
    <input id="Checkbox6" name="checkbox3" type="checkbox" />
    <input id="Checkbox7" name="checkbox3" type="checkbox" />
    <input id="Checkbox8" name="checkbox3" type="checkbox" />
   
    <br />
   
    <input id="Checkbox9" name="checkbox4" type="checkbox" />
    <input id="Checkbox10" name="checkbox4" type="checkbox" />
    <input id="Checkbox11" name="checkbox4" type="checkbox" />
    <input id="Checkbox12" name="checkbox4" type="checkbox" />
   
    <br />
   
    <input id="Checkbox1" name="checkbox5" type="checkbox" />
    <input id="Checkbox2" name="checkbox5" type="checkbox" />
    <input id="Checkbox3" name="checkbox5" type="checkbox" />
    <input id="Checkbox4" name="checkbox5" type="checkbox" />
   
</form>
</body>
</html>
<script type="text/javascript">
function getEs(name){
    return document.getElementsByName(name);
}
    for (var j = 1; j < 6; j++) {
        for (i = 0; i < getEs('checkbox'+j).length; i++) {
            getEs('checkbox' + j)[i].onclick = checkDate;
        }
    }
    function checkDate() {
        var checkCount = 0;
        for (i = 0; i < getEs(this.name).length; i++) {
            if (getEs(this.name)[i].checked) {
                checkCount++;
            }
        }
        if (checkCount > 2) {
            alert("每类最多只能选择两项");
            return false;
        }
    }
</script>
2010-05-21 16:36
jsy110
Rank: 1
等 级:新手上路
帖 子:31
专家分:0
注 册:2008-2-25
收藏
得分:0 
感谢高手兄。
2010-05-27 10:30
jsy110
Rank: 1
等 级:新手上路
帖 子:31
专家分:0
注 册:2008-2-25
收藏
得分:0 
本人现在正在学习jsp,语法什么的都还可以理解,但被其复杂的环境配置搞得很头痛,“foktime”老兄有什么经验之谈可以指点一下小弟。
  尤其是jsp与mysql数据库的配置和使用,真让我头痛,老是出问题。。。。郁闷ing。。。。
2010-05-27 10:32
gupiao175
Rank: 16Rank: 16Rank: 16Rank: 16
等 级:版主
威 望:40
帖 子:1787
专家分:7527
注 册:2007-6-27
收藏
得分:0 
版主foktime的JS水平确实厉害,赞一个!

Q:1428196631,百度:开发地 即可找到我,有事请留言!
2010-05-27 12:14
快速回复:这段代码如何简写?期盼高手指点迷津
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.020633 second(s), 9 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved