Just cannot allow users to select more than 5 checkbox
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" > <ptml> <pead> <title> New Document &L t;/title> <meta name= "generator" content= "EditPlus" > <meta name= "Author" content= "" > <meta name= "Key Words "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 (' Up to 5 main items not more! Please choose again! ');} }} window.onload = Boxnum; --> </script> </pead> <body> <table cellspacing= "0" border= "1" width= "> <tr > <td><input type= "checkbox" Name= "C" ></td> <td><input type= "checkbox"Name=" C "></td> <td><input type=" checkbox "Name=" C "></td> </tr> <t r> <td><input type= "checkbox" Name= "C" ></td> <td><input type= "checkbox" NA Me= "C" ></td> <td><input type= "checkbox" Name= "C" ></td> </tr> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The second method
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> Untitled document </title> <script> function boxnum (obj) {} function Checkn Um () {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 (' up to 5 main items not more! Please choose again! '); Srce.checked=false; }} Document.onkeydown=document.onchange=document.onclick=checknum; </script> </pead> <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" N Ame= "Checkbox3" value= "Checkboxaa"/> 2 <input type= "checkbox" Name= "Checkbox3" value= "CHECKBOXAAA" /> 3 <input type= "checkbox" Name= "Checkbox3" value= "Checkboxaaaa"/> 4 <i Nput type= "checkbox" Name= "Checkbox3" value= "CHECKBOXCV"/> 5 <input type= "checkbox" Name= "Checkbo X3 "value=" CHECKBOXCVB "/> 6 <input type=" checkbox "Name=" Checkbox3 "value=" CHECKBOXCVBCVB "/> 7 <input type= "checkbox" Name= "Checkbox3" value= "CHECKBOXCVBCVBCV"/> 8 <inpu T type= "checkbox" Name= "Checkbox3" value= "CHECCVB"/> 9 <input type= "checkbox" Name= "Checkbox3" va Lue= "CHECVB"/> <input type= "checkbox" Name= "Checkbox3" value= "Chcvbox"/> <input type= "checkbox" Name= " Checkbox3 "value=" Chcvbcvbox "/> <input type=" checkbox "Name=" Checkbox3 "value=" Ccvbcvbcvox "/>" lt;/label></td> <td> </td> <td> </td> </tr> <t r> <td><input type= "button" Name= "Submit" value= "button" onclick= "Boxnum (' Checkbox3 ')"/></td> <td> </td> <td> </td> </tr> <tr> <td>  ;</td> <td> </td> <td> </td> </tr> </table> ;/form> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
the above can only run under IE
Ways to support multiple browsers
<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 "checkbox" Type= "a" name= </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 ("Not more than 5 main items!" "); return false; return true; } </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
