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.

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 ;

Here j carries the serial number of the checkbox which was last clicked.

Here is the demo of checkbox limit



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.

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>

Number of User Comments : 17


Google+

More on CheckBox & PHP
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!
subhendu

17-07-2015

That is a protection given by browser, so script can't prevent or stop that.
This is not a bug .

Post Comment This is for short comments only. Use the forum for more discussions.






OPINION POLL

How you handle Search Engine Optimization ( SEO ) for your website
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2015 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer