This simple JavaScript allows you to check up to three checkboxes (allows a maximum of three out of five). When a user selects a fourth checkbox, an alert message is shown and upon ‘ok,’ it automatically deselects the fourth one. This script can easily be configured for any number of checkboxes. You can freely use this script. No Linkback or credits required.
<html>
<head>
<script type="text/javascript">
var checked=0;
function toggle(box) {
if( (box.checked == true) && (checked < 3) ) {
checked++;
return true;
} else if( (box.checked == true) && (checked == 3) ) {
alert("You will not be able to select more than 3 options");
return false;
} else {
checked--;
return true;
}
}
</script>
<style type="text/css">
.outerBorder {
border-top: #78acff 2px solid;
border-left: #78acff 2px solid;
border-bottom: #78acff 2px solid;
border-right: #78acff 2px solid;
background-color:#ffffff;
}
tr.checkboxOptions {
background-color: #c4cff1;
}
tr.checkboxBackground {
background-color: #597ddd;
}
td.question {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
font-weight: normal;
text-decoration: none;
}
td.serialNo {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
font-weight: bold;
text-decoration: none;
}
.normalText
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff;
text-decoration: none;
}
.checkBoxText
{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
text-decoration: none;
}
</style>
</head>
<body>
<!-- Start of Question -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td cellspacing="0" cellpadding="0" class="serialNo" align="left" height="30" width="2%">1.</td>
<td cellspacing="0" cellpadding="0" class="question" align="left" height="30" width="98%">Please help us prioritize the following short listed browsers (Select upto three options) ?
</td>
</tr>
<tr>
<td width="2%"></td>
<td cellspacing="0" cellpadding="0" colspan="2" align="left" height="30" width="98%">
<table class="outerBorder" border="0" cellpadding="1" cellspacing="0" width="90%">
<tbody>
<tr class="checkboxOptions">
<td class="checkBoxText" align="center" height="30"> </td>
<td class="checkBoxText" align="center" height="30">Firefox</td>
<td class="checkBoxText" align="center" height="30">Mozilla</td>
<td class="checkBoxText" align="center" height="30">Netscape</td>
<td class="checkBoxText" align="center" height="30">Opera</td>
<td class="checkBoxText" align="center" height="30">Internet Explorer</td>
</tr>
<tr class="checkboxBackground">
<td class="normalText" align="right" height="30" width="15%">Rating</td>
<td align="center" height="30"><input type="checkbox" value="1" name="CheckBox1" onclick="return toggle(this)"></td>
<td align="center" height="30"><input type="checkbox" value="1" name="CheckBox2" onclick="return toggle(this)"></td>
<td align="center" height="30"><input type="checkbox" value="1" name="CheckBox3" onclick="return toggle(this)"></td>
<td align="center" height="30"><input type="checkbox" value="1" name="CheckBox4" onclick="return toggle(this)"></td>
<td align="center" height="30"><input type="checkbox" value="1" name="CheckBox5" onclick="return toggle(this)"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End of Question -->
</body>
</html>
I just want to say I am just newbie to blogging and certainly savored your blog site. Likely I’m planning to bookmark your site . You definitely have amazing well written articles. Thanks for sharing your blog.