判斷checkbox選擇的個數(shù) 多瀏覽器

2019-11-21 02:31:00

字體：大中小

供稿：網(wǎng)友

就是不能讓用戶選擇超過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="http://m.survivalescaperooms.com/"/> <meta name="Keywords" content=""> <meta name="Description" content=""> <script language="JavaScript">  </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需刷新才能執(zhí)行]

第二種方法

<!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>無標(biāo)題文檔</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個主營項(xiàng)目！請重新選擇！');         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需刷新才能執(zhí)行]

上面的只能在IE下運(yùn)行
支持多瀏覽器的方法

<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個主營項(xiàng)目！");             return false;         }         return true;     } </script>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

上一篇：發(fā)現(xiàn)的以前不知道的函數(shù)

下一篇：多個iframe自動調(diào)整大小的問題