Leo Dominguez

Example

A user should be able to select sub-options and have the parent-option automatically selected for them. If a different sub-option is selected under a different parent-option, the previously selected parent and sub options should be de-selected. Try as many combinations as you like (select sub-option, then parent, or sub than sub), the radio buttons should never conflict!

Code

The following will obviously change according to your form. The functions should ideally be called using unobtrusive Javascript.

function doLasagnaCheck()
{
	var gotLasagnaOptions = document.getElementsByName("lasagnaoptions");

	for (var i=0;i<gotLasagnaOptions.length;i++)
	{
		gotLasagnaOptions[i].onclick = function()
		{
			//once user chooses a sub option, make parent option selected
			var gotBakedLasagna = document.getElementById("bakedlasagna");
			gotBakedLasagna.checked = true;

			uncheckSouthwesternOptions();
			uncheckLittleItalyOptions();
		}
	}
}

function doSouthwesternCheck()
{
	// initialize gotSouthwesternOptions as the place (id of container, etc) to use this script
	var gotSouthwesternOptions = document.getElementById("southwesternoptions");

	// initialize inputs as all the WHATEVER elements within gotSouthwesternOptions
	var inputs = gotSouthwesternOptions.getElementsByTagName("input");

	for (var i=0;i<inputs.length;i++)
	{
		inputs[i].onclick = function()
		{
			//once user chooses a sub option, make parent option selected
			var gotSouthwesternFlavors = document.getElementById("southwesternflavors");
			gotSouthwesternFlavors.checked = true;

			uncheckLasagnaOptions();
			uncheckLittleItalyOptions();
		}
	}
}

function doLittleItalyCheck()
{
	// initialize gotLittleItalyOptions as the place (id of container, etc) to use this script
	var gotLittleItalyOptions = document.getElementById("littleitalyoptions");

	// initialize inputs as all the WHATEVER elements within gotLittleItalyOptions
	var inputs = gotLittleItalyOptions.getElementsByTagName("input");

	for (var i=0;i<inputs.length;i++)
	{
		inputs[i].onclick = function()
		{
			//once user chooses a sub option, make parent option selected
			var gotLittleItaly = document.getElementById("littleitaly");
			gotLittleItaly.checked = true;

			uncheckLasagnaOptions();
			uncheckSouthwesternOptions();
		}
	}
}

function doHotLunchCheck()
{
	var gotHotLunch = document.getElementsByName("hotlunch");

	for (var i=0;i<gotHotLunch.length;i++)
	{
		switch(gotHotLunch[i].value)
		{
			case "bakedlasagna":
				gotHotLunch[i].onclick = function()
				{
					uncheckSouthwesternOptions();
					uncheckLittleItalyOptions();
				}
				break
			case "littleitaly":
				gotHotLunch[i].onclick = function()
				{
					uncheckLasagnaOptions();
					uncheckSouthwesternOptions();
				}
				break
			case "southwesternflavors":
				gotHotLunch[i].onclick = function()
				{
					uncheckLasagnaOptions();
					uncheckLittleItalyOptions();
				}
				break
			default:
				gotHotLunch[i].onclick = function()
				{
					uncheckLasagnaOptions();
					uncheckSouthwesternOptions();
					uncheckLittleItalyOptions();
				}
		}
	}
}

function uncheckLasagnaOptions()
{
	//if a user selects a hotlunch other than bakedlasagna, de-select the sub options
	var sublasagna = document.getElementsByName("lasagnaoptions");

	for (var i=0;i<sublasagna.length;i++)
	{
		sublasagna[i].checked = false;
	}
}

function uncheckSouthwesternOptions()
{
	// initialize gotSouthwesternOptions as the place (id of container, etc) to use this script
	var gotSouthwesternOptions = document.getElementById("southwesternoptions");

	// initialize inputs as all the WHATEVER elements within gotSouthwesternOptions
	var inputs = gotSouthwesternOptions.getElementsByTagName("input");

	for (var i=0;i<inputs.length;i++)
	{
		inputs[i].checked = false;
	}
}

function uncheckLittleItalyOptions()
{
	// initialize gotLittleItalyOptions as the place (id of container, etc) to use this script
	var gotLittleItalyOptions = document.getElementById("littleitalyoptions");

	// initialize inputs as all the WHATEVER elements within gotLittleItalyOptions
	var inputs = gotLittleItalyOptions.getElementsByTagName("input");

	for (var i=0;i<inputs.length;i++)
	{
		inputs[i].checked = false;
	}
}

window.onload = function()
{
	doLasagnaCheck();
	doSouthwesternCheck();
	doHotLunchCheck();
	doLittleItalyCheck();
}

Credits

How to style a restaurant menu with CSS

Leo Dominguez