Limiting the number of checkboxes selected by user
Many time inside our form we want a rule or limit where uses are not allowed to select more than a number of checkbox to give their choice. For example we are asked to select three areas of web programming where we are the best. Total eight choices are given to us, out of which only three ( maximum ) are to be selected. Here the user can go for three selection and once he / she goes for fourth selection the JavaScript function script should show him a error alert message saying maximum 3 are allowed and the fourth selected ( or checked ) should be automatically unchecked after the message.
Limiting number of selection user can check from a group of checkboxes by using JavaScript
You can read the checkbox details like its status and how to handle array of checkbox here .
We have used onclick event of checkbox to trigger the function which checks the number of checkbox clicked. Here once the fourth one is clicked by the user the function shows a message and after that it removes or uncheck the last checkbox ( the fourth one ) the user has clicked. So on every click of the checkbox we will pass the serial number of the checkbox to the function to tell which one is the last one clicked. This line below inside the function uses that and unchecks that particular checkbox.
document.form1.ckb[j].checked = false ;demo of checkbox limit
demo of checkbox limit by using getElementByName()
Here is the complete code.
<html>
<head>
<title></title>
<META NAME="DESCRIPTION" CONTENT="">
<META NAME="KEYWORDS" CONTENT="">
<script type="text/javascript">
function chkcontrol(j) {
var total=0;
for(var i=0; i < document.form1.ckb.length; i++){
if(document.form1.ckb[i].checked){
total =total +1;}
if(total > 3){
alert("Please Select only three")
document.form1.ckb[j].checked = false ;
return false;
}
}
} </script>
</head>
<body topmargin=''0''; >
<form name=form1 method=post action=check.php>
<table border=''0'' width=''250'' cellspacing=''0'' cellpadding=''0'' align=center>
<tr bgcolor=''#ffffcc''><td > </td><td ><b>Choice</b></td></tr>
<tr bgcolor=''#f1f1f1'' ><td ><input type=checkbox name=ckb value=1 onclick='chkcontrol(0)';></td><td >PHP</td></tr>
<tr bgcolor=''#ffffff'' ><td ><input type=checkbox name=ckb value=2 onclick='chkcontrol(1)';></td><td >Perl</td></tr>
<tr bgcolor=''#f1f1f1'' ><td ><input type=checkbox name=ckb value=3 onclick='chkcontrol(2)';></td><td >MySQL</td></tr>
<tr bgcolor=''#ffffff'' ><td ><input type=checkbox name=ckb value=4 onclick='chkcontrol(3)';></td><td >ASP</td></tr>
<tr bgcolor=''#f1f1f1'' ><td ><input type=checkbox name=ckb value=5 onclick='chkcontrol(4)';></td><td >JavaScript</td></tr>
<tr bgcolor=''#ffffff'' ><td ><input type=checkbox name=ckb value=6 onclick='chkcontrol(5)';></td><td >CSS</td></tr>
<tr bgcolor=''#f1f1f1'' ><td ><input type=checkbox name=ckb value=7 onclick='chkcontrol(6)';></td><td >HTML</td></tr>
<tr bgcolor=''#ffffff'' ><td ><input type=checkbox name=ckb value=8 onclick='chkcontrol(7)';></td><td >Photo Shop</td></tr>
</table></form>
</body>
</html>
Restricting the sum of selected values of the checkboxes.
In the above example we have restricted maximum number of selection user can make. Each checkbox has one value associated with it. We can keep an upper limit of sum of selected values of the checkbox. Here user can select any number of checkboxes as long as the sum of the values of selected checkboxes is not exceeding a constant value.
Limiting number of selection user can check from a group based on associated value of each checkbox
In our demo we have given values 1 to 8 to checkboxes and kept the permissible upper limit of 10. So user can select as many checkboxes they want but sum can't exceed 10.
demo of limiting sum of checkbox value
We have used parseInt function to change checkbox value from string to integer
Source code is here
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<html>
<head>
<title></title>
<META NAME="DESCRIPTION" CONTENT="Demo of How to restrict number of checkboxes selected based on the sum of the values">
<link rel="stylesheet" href="../images/all11.css" type="text/css">
<script type="text/javascript">
function chkcontrol(j) {
var sum=0;
for(var i=0; i < document.form1.ckb.length; i++){
if(document.form1.ckb[i].checked){
sum = sum + parseInt(document.form1.ckb[i].value);
}
document.getElementById("msg").innerHTML="Sum :"+ sum;
if(sum >10){
sum = sum - parseInt(document.form1.ckb[j].value);
document.form1.ckb[j].checked = false ;
alert("Sum of the selection can't be more than 10")
//return false;
}
document.getElementById("msg").innerHTML="Sum :"+ sum;
}
}
</script>
</head>
<body>
<form name=form1 method=post action=check.php>
<div id=sample_table>
<table>
<tbody>
<tr ><th >Select</th></tr>
<tr bgcolor='#f1f1f1' ><td ><input type=checkbox name=ckb value=1 onclick='chkcontrol(0)';> Value = 1 </td></tr>
<tr><td ><input type=checkbox name=ckb value=2 onclick='chkcontrol(1)';> Value = 2 </td></tr>
<tr bgcolor='#f1f1f1' ><td ><input type=checkbox name=ckb value=3 onclick='chkcontrol(2)';> Value = 3 </td></tr>
<tr ><td ><input type=checkbox name=ckb value=4 onclick='chkcontrol(3)';> Value = 4 </td></tr>
<tr bgcolor='#f1f1f1' ><td ><input type=checkbox name=ckb value=5 onclick='chkcontrol(4)';> Value = 5 </td></tr>
<tr ><td ><input type=checkbox name=ckb value=6 onclick='chkcontrol(5)';> Value = 6 </td></tr>
<tr bgcolor='#f1f1f1' ><td ><input type=checkbox name=ckb value=7 onclick='chkcontrol(6)';> Value = 7 </td></tr>
<tr ><td ><input type=checkbox name=ckb value=8 onclick='chkcontrol(7)';> Value = 8 </td> </tr>
</table></div></form>
Sum of the values can't exceed 10.
<br><br>
<div id=msg></div><br><br>
<p class='prev'><a href=checkbox-limit.php>Checkbox Limit tutorial</a></p>
</body>
</html>
JavaScript Checkbox Reference
Subscribe to our YouTube Channel here
This article is written by plus2net.com team.
| KDR | 22-12-2010 |
| Do note that the "serial number" (variable n) you assign in the form needs to be sequential in the order the page gets rendered. I.e. when you read your lines of code from the top down, the variable n you assign to each checkbox should be sequential. This only comes into play if you have your checkboxes in a table with more than one column. Your displayed data might go down one column and then down the next, your variable n needs to go left to right, row by row. | |
| semky | 04-05-2011 |
| All your check boxes have the same name. when So when php inserts form values into mysql, I need each box to have a separate name. but only 3 can be checked, I am inserting 9 check boxes. check is not like radio with same name. | |
| mdrayhankhan | 31-03-2012 |
| Thanks, This code is effective for my work. | |
| Gannear | 16-05-2012 |
| Thanx a lot...... | |
| Richard | 19-06-2012 |
| The demo works very nice, but when I copy and paste the complete code and save as test.html the form is there but does not check how many boxes are checked. Why? thanks. | |
| Sam | 14-08-2012 |
| Richard,, same problem ! | |
| smo | 16-08-2012 |
| Now it is rectified. There was two single quotes on onClick event. Sorry. Try now. | |
| Pete | 01-09-2012 |
| Hi, Thanks for the tutorial it was very helpful. I was wondering if that could be converted for text fields? In my form there are 3 text fields but I want the visitor to insert a number in only 1 text field. Would be grateful for your advise, thanks. | |
| phanindra | 22-05-2013 |
| plz tell me how to uncheck boxes using forloops /......... I have 18 checkboxes , aLL are checked yes by default when u click on the boxes unchecked then you have to print the numbers side by side in alert .. | |
| smo | 22-05-2013 |
| You can little modify the script on Checkbox array and do this. Let us know if it works. | |
| dhawal | 20-01-2014 |
| i want same functionality for asp.net checkbox | |
| kkreitz | 07-10-2014 |
| Is there a modification to this that allows each checkbox to have a unique value and the user cannot exceed a set sum of these values? ie. checkbox value=1, checkbox value=.5, checkbox value=1.5, checkbox value=2, sum of boxes checked not to exceed 3. | |
| smo | 10-10-2014 |
| Good point. This modification is added with a demo. | |
| Ragith | 12-11-2014 |
| Ya good examples. I was very useful for me to use in my codes. | |
| rusty | 18-01-2015 |
| My form feeds a database where each checkbox has it's own lengthy name. The checkboxes are also inside of different table names as they correspond to the database. Really, I just need to limit the entire number of checkboxes checked on the form to be no more than 25. Having trouble getting anything I've tried to work. Can you help? | |
| Thiodene | 13-07-2015 |
| There is an option in Firefox in the pop up message saying: "Prevent this page from creating additional dialogs" as soon as you tick this box, this script becomes inactive and you can check all the boxes! That is what I consider a bug! | |
| smo1234 | 17-07-2015 |
| That is a protection given by browser, so script can't prevent or stop that. This is not a bug . | |