页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容

判断checkbox选择的个数多浏览器

发布：dxy 字体：[增加减小] 类型：转载

就是不能让用户选择超过5个checkbox

点击运行可以看到效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<title> New Document </title> 
<meta name="Generator" content="EditPlus"> 
<meta name="Author" content=""> 
<meta name="Keywords" content=""> 
<meta name="Description" content=""> 
<script language="JavaScript"> 
 
</script> 
</head>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

第二种方法

点击运行可以看到效果:

<!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>无标题文档</title> 
<script>

function boxnum(obj){ 
     
}

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

上面的只能在IE下运行
支持多浏览器的方法

点击运行可以看到效果:

<form method="post" action="" name="form1" id="form1"> 
    <input type="checkbox" name="a" /> 
    <input type="checkbox" name="a" /> 
    <input type="checkbox" name="a" /> 
    <input type="checkbox" name="a" /> 
    <input type="checkbox" name="a" /> 
    <input type="checkbox" name="a" /> 
    <input type="checkbox" name="a" /> 
    <input type="checkbox" name="a" /> 
    <input type="checkbox" name="a" /> 
</form> 
<script language="javascript" type="text/javascript"> 
    var m_count = 0; 
    document.getElementById("form1").onclick = function(e){ 
        ele = (document.all)?window.event.srcElement:e.target; 
        if (ele.nodeName.toLowerCase()=="input" && ele.type.toLowerCase()=="checkbox" && ele.checked) 
            m_count++; 
        if (ele.nodeName.toLowerCase()=="input" && ele.type.toLowerCase()=="checkbox" && !ele.checked) 
            m_count--; 
        if(m_count>5){ 
            m_count--; 
            alert("最多不能超多5个主营项目！"); 
            return false; 
        } 
        return true; 
    } 
</script>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：当判断checkbox选择的个数