I'm attempting to make this functionality work differently. Instead of displaying the standard radio button, or replacing it with an image, I want to use a styled div as a button. When hovered over, the class should change, and when clicked, the class should also change. Additionally, upon clicking, the hidden radio button should be selected. It's crucial that the label (referring to text like .co.uk, .com, .net, etc.) is inside the button div or that text can be added to the button. Is this achievable?
$(function() {
$("input [name='domain_ext']").each(function() {
if ($(this).prop('checked')) {
$(this).hide();
$(this).after($("< class='radioButtonOff' />"));
} else {
$(this).hide();
$(this).after($("<class='radioButtonOn' />"));
}
});
$("input.radio").click(function() {
if($(this).attr('src') == 'radiobuttonOn') {
$(this).attr('src', 'radiobuttonOff');
$(this).prev().attr('checked', 'false');
} else { // its not checked, so check it
$(this).attr('src', 'radioButtonOn');
$(this).prev().attr('checked', 'true');
}
});
});
HTML
<table class="domain_ext_ribbon">
<tr>
<td><label>
<input type="radio" name="domain_ext" value="all" />
All</label></td>
<td><label>
<input type="radio" name="domain_ext" value=".co.uk" />
.co.uk</label></td>
<td><label>
<input type="radio" name="domain_ext" value=".com" />
.com</label></td>
</tr>
<tr>
<td><label>
<input type="radio" name="domain_ext" value=".net" />
.net</label></td>
<td><label>
<input type="radio" name="domain_ext" value=".org" />
.net</label></td>
<td><label>
<input type="radio" name="domain_ext" value=".biz" />
.net</label></td>
</tr>
</table>
css
.radioButtonOff { width: 60px; height: 20px; background: #000000;}
.radioButtonHover { width: 60px; height: 20px; background: #666666;}
.radioButtonOn { width: 60px; height: 20px; background: #999999;}