JS Radio Selector

index.html

<label class="radio" for="nice_day_yes">Yes</label>
<input id="nice_day_yes" type="radio" name="nide_day" value="yes"/>
<span>/</span>
<label class="radio" for="nice_day_no">No</label>
<input id="nice_day_no" type="radio" name="nice_day" value="no"/>

script.js

// On load, show that a radio has been checked
$('input[type="radio"]').each(function() {
	if($(this).is(':checked')) {
		var id = $(this).attr('id');
		var name = $(this).attr('name');
	}

	// Find all inputs with same name
	$('input[name="' + name + '"]').each(function() {
		// Check if it is actually the same as the one clicked on
		// (if it is, do nothing)
		// (if it isn't, then add a strike class)
		if($(this).prev().attr('for') !== id) {
			$(this).prev().addClass('strike');
		}
	});
});

// If a radio field has been selected, then the other radio
// will be crossed out
$('input[type="radio"]').change(function() {
	var id = $(this).attr('id');
	var name = $(this).attr('name');

	// Remove all strike classes
	$(this).prev().removeClass('strike');

	// Find all inputs with the name which is the same as the one clicked on
	$('input[name="' + name + '"]').each(function() {
		// Check if it is actually the same as the one clicked on
		// (if it is, do nothing)
		// (if it isn't, then add a strike class)
		if($(this).prev().attr('for') !== id) {
			$(this).prev().addClass('strike');
		}
	});
});

style.css

input[type="radio"] {
	display:none;
}

label.radio {
	display:inline-block;
	margin:0;
	cursor:pointer;
}

label.radio.strike {
	text-decoration:line-through;
}