I'm trying to make a form where a user can check boxes, and depending on if certain boxes have been checked, other boxes will grey out or un-grey.

What the code does is look at the checkbox name and depending on the family (f), and whether or not the box is a child (c) or a parent (p), the code will grey out certain boxes.

Now that I've sat back and thought about the code, I think there is probably a better way to achieve what I want.

Maybe I can specify checkbox names instead of doing the parent child hierarchy that i'm trying.

Any suggestions?



This is what I have so far, but it's getting complicated.
Code:
function evaluateFormOptions(e)
{
   var e = event || e;
   var checkbox = e.srcElement || e.target;
   var formElements = document.forms["myForm"].elements;
   getNumberOfFamilies(formElements);
}
function getNumberOfFamilies(formElements)
///////////////////////////////////////////////////////////////////////////////
// gets the number of families											   //
// Function only supports single character family and child values right now //
///////////////////////////////////////////////////////////////////////////////
{
   for (var formOptionsArrayIndex = 0; formOptionsArrayIndex < formElements.length; formOptionsArrayIndex++ )
   {
			// get position of family character then get the family character
			var familyNumberPosition = formElements[formOptionsArrayIndex].name.indexOf('f') + 1;
			var familyNumber = formElements[formOptionsArrayIndex].name.charAt(familyNumberPosition);
			// set up the familyArray so it's length can be counted later
			var familyArray = new Array();
			   // add familyNumber to the familyArray
			   for (formOptionsArrayIndex = 0; formOptionsArrayIndex < formElements.length; formOptionsArrayIndex++)
			   {
				  //check if array already has family number in it, if not add the family number to the array
				  if (familyArray.indexOf(familyNumber) == '-1')
				  {
					 //add another space in the array and put the new family number in it
					 var newItemPosition = familyArray.length;
					 familyArray.length = familyArray.length + 1;
					 familyArray.[newItemPosition] = familyNumber;
				  }
			   }
	}
	alert(familyArray.length);
}
It works with this html code
Code:
<body onload="evaluateFormOptions()">
<form action="" name="myForm">
<input type="checkbox" name="f1p1" value="ON" />f1p1<br />
<input type="checkbox" name="f2p1" value="ON" />f2p1<br />
<input type="checkbox" name="f2p2" value="ON" />f2p2<br />
<input type="checkbox" name="f2c1" value="ON" />f2p3<br />
</form>
<input type="text" size="100" name="teamsTxt" value="">
</body>
Or at least it should, but I'm having problems and the code is nowhere near done. It seems a little much for the goal of the code.