Limiting the number of checkboxes selected by user

Number of Checkboxes selection limit 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 ;
Here j carries the serial number of the checkbox which was last clicked.
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.

Number of Checkboxes selection based on total value 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>
Validate Checkbox in a form
JavaScript Checkbox Reference
Subscribe to our YouTube Channel here


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com







    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 .

    Post your comments , suggestion , error , requirements etc here




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer