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:

<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

M	T	W	T	F	S	S
« Feb
						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

You may select four pictures only!
(Picture 1)	(Picture 2)	(Picture 3)
(Picture 4)	(Picture 5)	(Picture 6)
(Picture 7)	(Picture 8)	(Picture 9)

Limit the number of ticks allowed for a list of check boxes

Leave a Reply