NAV Highligting

by john_s

HTML

<ul class="highlightOne">
	<li>
		<label><input name="radioGroup1" type="radio" value="" checked />Item 1</label>
	</li>
	<li>
		<label><input name="radioGroup1" type="radio" value="" />Item 2</label>
	</li>
	<li>
		No radio button.
	</li>
	<li>
		<label><input name="radioGroup1" type="radio" value="" />Item 3</label>
	</li>
	<li>
		<label><input name="radioGroup1" type="radio" value="" />Item 4</label>
		<ul class="highlightOne secondaryHighlight">
			<li>
				<label><input name="radioGroup2" type="radio" value="" checked />Item 4a</label>
			</li>
			<li>
				<label><input name="radioGroup2" type="radio" value="" />Item 4b</label>
			</li>
			<li>
				No radio button.
			</li>
			<li>
				<label><input name="radioGroup2" type="radio" value="" />Item 4c</label>
			</li>
			<li>
				<label><input name="radioGroup2" type="radio" value="" />Item 4d</label>
			</li>
			<li>
				<label><input name="radioGroup2" type="radio" value="" />Item 4e</label>
			</li>
		</ul>

	</li>
	<li>
		<label><input name="radioGroup1" type="radio" value="" />Item 5</label>
	</li>
</ul>

CSS

ul.highlightOne > li.selected,
ul.highlightOne > li.selected:hover {
	background: #FFF9AD !important;
	border: 1px solid #E3CB00 !important;
}
ul.highlightOne.secondaryHighlight > li.selected,
ul.highlightOne.secondaryHighlight > li.selected:hover {
	background: #cc6699 !important;
	border: 1px solid #E3CB00 !important;
}

JavaScript

var updateHighlightOne = function(element, bind) {
	var element$ = $(element);

	if (element$.is('ol, ul')) { // Check if the element is a list element.
		element$.children('li').each(function() { // Loop through all the list item elements.
			var item$ = $(this);

			var radio$ = item$.find('input[type="radio"]:first'); // Find the first radio button in the list element.

			if (radio$[0]) {
				if (radio$[0].checked) {
					item$.addClass('selected').siblings().removeClass('selected');
				}

				if (bind) {
					radio$.on('click', function() {
						item$.addClass('selected').siblings().removeClass('selected');
					});
				}
			}

			return (bind || !radio$[0] || !radio$[0].checked); // We can short circuit if we are not binding.
		});
	} else if (element$.is('table, tbody')) {
		// ...
	}
};

$('.highlightOne').each(function() { // Loop through all elements with the "highlightOne" class.
	updateHighlightOne(this, true);
});