SQL PHP HTML ASP JavaScript articles and free scripts to download
JavaScript Form Validation Checkbox

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 : 14


Google+

More on CheckBox & PHP
KDR22-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.
semky04-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.
mdrayhankhan31-03-2012
Thanks, This code is effective for my work.
Gannear16-05-2012
Thanx a lot......
Richard19-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.
Sam14-08-2012
Richard,, same problem !
smo16-08-2012
Now it is rectified. There was two single quotes on onClick event. Sorry. Try now.
Pete01-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.
phanindra22-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 ..
smo22-05-2013
You can little modify the script on Checkbox array and do this. Let us know if it works.
dhawal20-01-2014
i want same functionality for asp.net checkbox
kkreitz07-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.
smo10-10-2014
Good point. This modification is added with a demo.
Ragith12-11-2014
Ya good examples. I was very useful for me to use in my codes.
Post Comment This is for short comments only. Use the forum for more discussions.
Name
Email( not to be displayed)Privacy Policy
1+2=This is to prevent automatic submission by spammers. Please enter the result of the sum as asked

Form Validation in JavaScript
Checkbox Validation of a form



HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us

©2000-2014 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer