Toggling Radio Buttons

by bowheart

HTML

<div>
	<input name="a" type="radio" id="radio-a-0">
	<label for="radio-a-0"></label>
	<label for="radio-a-0">Choose this option.</label>
</div>
<div>
	<input name="a" type="radio" id="radio-a-1">
	<label for="radio-a-1"></label>
	<span>Or this option.</span>
</div>

CSS

input[type="radio"] {
	display: none;
}
input[type="radio"] + label {
	background: #ddd;
	box-shadow: inset 1px 1px 3px #444;
	cursor: pointer;
	display: inline-block;
	position: relative;
	text-align: center;
	user-select: none; -webkit-user-select: none;
	height: 30px;
	width: 30px;
}
input[type="radio"] + label:hover {
	background: #eee;
}

input[type="radio"]:checked + label {
	background: #feffde;
}
input[type="radio"]:checked + label:after {
	color: #256eff;
	content: '✔';
	font-size: 36px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
}

JavaScript

$('label').mousedown(function() {
	$(this).prev()[0].checked = !$(this).prev()[0].checked;
});
$('input[type="radio"]').click(function(event) {
	event.preventDefault();
});