<html>
<head>
<script language=javascript><!--
// maximum number of checkboxes that can be selected
// default can be overridden by "maxNo" form field
var iMaxNoDefault = 3
var maxNo = iMaxNoDefault
// initialize the checkboxes
function CheckboxInit()
{
// try to read maxNo from hidden form field
var oMaxNo = document.getElementById("maxNo")
if (oMaxNo) maxNo = oMaxNo.value
// if invalid, use default value
if (isNaN(maxNo)) maxNo = iMaxNoDefault
if (maxNo < 1) maxNo = iMaxNoDefault
// bail if the browser can't speak DOM
if (!document.getElementsByName) return
// for every checkbox in the MyBest family, assign the event
var aBoxes = document.getElementsByName("MyBest")
for(var iBox = 0; iBox < aBoxes.length; iBox++)
{
aBoxes[iBox].onclick = CheckMax
}
}
// stop checkbox selection when the max has been reached
function CheckMax()
{
var numChecked = 0
var bolPop=false;
// for each checkbox with the same name, count selections
var aObjects = this.form[this.name]
for(var x = 0; x < aObjects.length; x++)
{
if(aObjects[x].checked)
{
numChecked++
if (numChecked>maxNo)
{
bolPop=true
this.checked=false
}
}
}
if (bolPop) alert('You have already selected '+maxNo+' items. ')
}
--></script>
</head>
<body onload="CheckboxInit()">
<form action="http://go.do.something" method=get>
<table><tr>
<td width="25%"><span class="cssMainSmall"><input type="checkbox" name="MyBest" value="Intelligent" ID="Checkbox1">Intelligent</span></font></td>
<td width="25%"><span class="cssMainSmall"><input type="checkbox" name="MyBest" value="Thoughtful" ID="Checkbox2">Thoughtful</span></font></td>
<td width="25%"><span class="cssMainSmall"><input type="checkbox" name="MyBest" value="Sweet" ID="Checkbox3">Sweet</span></font></td>
<td width="25%"><span class="cssMainSmall"><input type="checkbox" name="MyBest" value="Passionate" ID="Checkbox4">Passionate</span></font></td>
</tr></table>
<input type="hidden" id="maxNo" value="x3">
</form>
</body>
</html>