Maximum allowed selection of checkboxes in a form by JavaScript

SQL PHP HTML ASP JavaScript articles and free scripts to download

JavaScript Tutorials

Popular Tutorials

JavaScript Tutorials

Form Validation

JavaScript Forum

Subscribe

Submit your email address and receive article and product notifications. Your email is safe with us.

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

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>

Further readings

Javascript Form Validation

Period button Validation of a form

How to limit number of checkboxes allowed to be clicked inside a form

Checkbox Validation of a form

Displaying checked value of a check box array

All Checking & Un checking in a group of checkboxes by single button

Adding options to a drop down list box

Removing options from a drop down list box

Moving options from one drop down list box to other

Dynamic population of second list box based on value of first list box

Subscribe

Submit your email address and receive article and product notifications. Your email is safe with us.

Scripts