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

就是不能让用户选择超过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"> <!-- var ii = 0; function boxnum(){ var box = document.getElementsByName("c"); for(var i=0;i<box.length;i++){ box[i].onclick = function chk(){ if(this.checked && ii <= 5) ii += 1; if(! this.checked) ii -= 1; if(ii>5){ ii -=1; this.checked = false;alert('最多不能超多5个主营项目！请重新选择！');} } } } window.onload = boxnum; //--> </script> </head> <body> <table cellspacing="0" border="1" width="200" > <tr> <td><input type="checkbox" name="c"></td> <td><input type="checkbox" name="c"></td> <td><input type="checkbox" name="c"></td> </tr> <tr> <td><input type="checkbox" name="c"></td> <td><input type="checkbox" name="c"></td> <td><input type="checkbox" name="c"></td> </tr> </body> </html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
第二种方法
<!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){ } function checknum(){ var e,srcE e=window.event?window.event:e; srcE=e.srcElement?e.srcElement:e.target; if(!srcE)return; if(String(srcE.tagName).toLowerCase()!="input"||String(srcE.type).toLowerCase()!="checkbox")return; var box = document.form1.elements['checkbox3']; var ii = 0 for(var i=0;i<box.length;i++){ if(box[i].checked){ii++;} } if(ii>5){ alert('最多不能超多5个主营项目！请重新选择！'); srcE.checked=false; } } document.onkeydown=document.onchange=document.onclick=checknum; </script> </head> <body> <form id="form1" name="form1" method="post" action=""> <table width="520" height="221" border="1"> <tr> <td><label> <input type="checkbox" name="checkbox3" value="checkboxa" /> 1 <input type="checkbox" name="checkbox3" value="checkboxaa" /> 2 <input type="checkbox" name="checkbox3" value="checkboxaaa" /> 3 <input type="checkbox" name="checkbox3" value="checkboxaaaa" /> 4 <input type="checkbox" name="checkbox3" value="checkboxcv" /> 5 <input type="checkbox" name="checkbox3" value="checkboxcvb" /> 6 <input type="checkbox" name="checkbox3" value="checkboxcvbcvb" /> 7 <input type="checkbox" name="checkbox3" value="checkboxcvbcvbcv" /> 8 <input type="checkbox" name="checkbox3" value="checcvb" /> 9 <input type="checkbox" name="checkbox3" value="checvb" /> 10 <input type="checkbox" name="checkbox3" value="chcvbox" /> <input type="checkbox" name="checkbox3" value="chcvbcvbox" /> <input type="checkbox" name="checkbox3" value="ccvbcvbcvox" /> </label></td> <td> </td> <td> </td> </tr> <tr> <td><input type="button" name="Submit" value="按钮" onclick="boxnum('checkbox3')" /></td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </form> </body> </html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
上面的只能在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 全选 注:如需引入外部Js需刷新才能执行]