aerith/pseudo-radio.html

## pseudo-radio.html
<html>
<head>
<style type="text/css">

.pseudo-radio li {
	float: left;
	width: 200px;
	display: block;
	list-style: none;
}

.pseudo-radio li a {
	display: block;
	color: #000;
	background: #eee;
	text-align: center;
	text-decoration: none;
	border: 1px solid #333;
	margin: 0 10px;
	padding: 3px 4px;
}

.pseudo-radio li a.selected,
.pseudo-radio li a:hover {
	color: #fff;
	background: #f33;
	border: 1px solid #600;
}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" charset="UTF-8"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" charset="UTF-8"></script>
<script type="text/javascript">
(function ($) {

$(document).ready(function () {
	$('.pseudo-radio').each(function () {
		var list = this;

		$('li > a', list).click(function (event) {
			event.stopPropagation();
			event.preventDefault();

			var item = $(this);

			$(list)
				.find('> li a')
					.removeClass('selected')
				.end();

			$('#' + item.addClass('selected').parents('ul').eq(0).data('form-element-id')).val(item.data('value'));

			return false;
		});
	});
});

})(jQuery);
</script>
</head>
<body>
<input type="hidden" name="pseudo-radio" id="pseudo-radio" value="">
<ul class="pseudo-radio clearfix" data-form-element-id="pseudo-radio">
	<li><a href="#" data-value="1">Memo</a></li>
	<li><a href="#" data-value="2">Reminder</a></li>
	<li><a href="#" data-value="3">Plan</a></li>
	<li><a href="#" data-value="4">Schedule</a></li>
	<li><a href="#" data-value="5">Record</a></li>
</ul>
</body>
</html>
	<html>
	<head>
	<style type="text/css">

	.pseudo-radio li {
	float: left;
	width: 200px;
	display: block;
	list-style: none;
	}

	.pseudo-radio li a {
	display: block;
	color: #000;
	background: #eee;
	text-align: center;
	text-decoration: none;
	border: 1px solid #333;
	margin: 0 10px;
	padding: 3px 4px;
	}

	.pseudo-radio li a.selected,
	.pseudo-radio li a:hover {
	color: #fff;
	background: #f33;
	border: 1px solid #600;
	}

	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" charset="UTF-8"></script>
	<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" charset="UTF-8"></script>
	<script type="text/javascript">
	(function ($) {

	$(document).ready(function () {
	$('.pseudo-radio').each(function () {
	var list = this;

	$('li > a', list).click(function (event) {
	event.stopPropagation();
	event.preventDefault();

	var item = $(this);

	$(list)
	.find('> li a')
	.removeClass('selected')
	.end();

	$('#' + item.addClass('selected').parents('ul').eq(0).data('form-element-id')).val(item.data('value'));

	return false;
	});
	});
	});

	})(jQuery);
	</script>
	</head>
	<body>
	<input type="hidden" name="pseudo-radio" id="pseudo-radio" value="">
	<ul class="pseudo-radio clearfix" data-form-element-id="pseudo-radio">
	<li><a href="#" data-value="1">Memo</a></li>
	<li><a href="#" data-value="2">Reminder</a></li>
	<li><a href="#" data-value="3">Plan</a></li>
	<li><a href="#" data-value="4">Schedule</a></li>
	<li><a href="#" data-value="5">Record</a></li>
	</ul>
	</body>
	</html>