Limit the number of ticks allowed for a list of check boxes
March 1st, 2009 | Author: Haider al-Khateeb
As part of an experiment for testing a new authentication mechanism for web applications (will post more about it sometime in the future) I needed my users to select only four images out of many while filling a form.
I used a CheckBox beside every image and developed a JavaScript code to limit the number of checkboxes allowed to be ticked.
I am posting the code here followed by a Demo of how it works:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | <html> <head> <title></title> <script type="text/javascript"> function CheckBoxF(x) { var total=0; var i=0; do { if(document.SelPicForm.ChkBox[i].checked){ total =total +1; } if(total > 4){ alert("Please select only four") document.SelPicForm.ChkBox[x].checked = false ; return false; } i++; }while(i < document.SelPicForm.ChkBox.length) } </script> </head> <body> <form name="SelPicForm" method="post" action=""> <table align="center" cellspacing="15"> <tr> <td colspan="3" bgcolor="#c2c2c2" align="middle"> You may select <b>four</b> pictures only!</td> </tr> <tr> <td bgcolor="#f0f0f0" align="middle">(Picture 1) <input type="checkbox" name="ChkBox" value="1" onclick="CheckBoxF(0)"> </td> <td bgcolor="#f0f0f0" align="middle">(Picture 2) <input type="checkbox" name="ChkBox" value="2" onclick="CheckBoxF(1)"> </td> <td bgcolor="#f0f0f0" align="middle">(Picture 3) <input type="checkbox" name="ChkBox" value="3" onclick="CheckBoxF(2)"> </td> </tr> <tr> <td bgcolor="#f0f0f0" align="middle">(Picture 4) <input type="checkbox" name="ChkBox" value="4" onclick="CheckBoxF(3)"> </td> <td bgcolor="#f0f0f0" align="middle">(Picture 5) <input type="checkbox" name="ChkBox" value="5" onclick="CheckBoxF(4)"> </td> <td bgcolor="#f0f0f0" align="middle">(Picture 6) <input type="checkbox" name="ChkBox" value="6" onclick="CheckBoxF(5)"> </td> </tr> <tr> <td bgcolor="#f0f0f0" align="middle">(Picture 7) <input type="checkbox" name="ChkBox" value="7" onclick="CheckBoxF(6)"> </td> <td bgcolor="#f0f0f0" align="middle">(Picture 8) <input type="checkbox" name="ChkBox" value="8" onclick="CheckBoxF(7)"> </td> <td bgcolor="#f0f0f0" align="middle">(Picture 9) <input type="checkbox" name="ChkBox" value="9" onclick="CheckBoxF(8)"> </td> </tr> </table></form> </body> </html> |
Demo for the above code is as follows:
Posted in JavaScript
