Check out this JSFiddle example: http://jsfiddle.net/BD8j2/8/.
(I have updated the HTML code in this post to resolve issues with invalid markup and cross-browser compatibility, replacing it with a JavaScript solution.)
HTML:
<div class="answers">
<form>
<label class="links">
<input type="radio" name="sex" value="male" />
<a href="http://w3.org">Male</a>
</label>
</form>
</div>
<div class="answers">
<form>
<label class="links">
<input type="radio" name="sex" value="female" />
<a href="http://w3.org">Female</a>
</label>
</form>
</div>
JavaScript:
function init() {
var link_elems = getElementsByClass('links');
for(var i = 0; i < link_elems.length; i++) {
addEvent(link_elems[i], 'click', goToLink);
}
}
function goToLink(e) {
if(e.stopPropagation) {
e.stopPropagation();
} else if(typeof e.cancelBubble != 'undefined') {
e.cancelBubble();
}
e.currentTarget.children[0].checked = true;
window.location = e.currentTarget.children[1].href;
}
function addEvent(elem, event, handler) {
if(elem.addEventListener) {
elem.addEventListener(event, handler, false);
} else if(elem.attachEvent) {
elem.attachEvent('on' + event, handler);
} else {
elem['on' + event] = handler;
}
}
function getElementsByClass(className) {
if(document.getElementsByClassName) {
return document.getElementsByClassName(className);
} else if(document.all) {
var everything = document.all;
var all_length = everything.length;
var matches = [];
for (var i = 0; i < all_length; i++) {
if(everything[i].className == className) {
matches[matches.length] = everything[i];
}
}
return matches;
}
return false;
}
addEvent(window, 'load', init);
CSS:
.answers {
width: 220px;
height: 50px;
margin-top: 20px;
border-top: 1px solid black;
border-bottom: 1px solid black;
background-color: #ddd;
background-image: url('http://fortmovies.com/brazil/arrow.png');
background-repeat: no-repeat;
background-position: 0 50%;
}
.answers label {
float: left;
margin-left: 75px;
padding-top: 15px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold
}
.answers input {
margin-right: 5px
}
This update simplifies the JavaScript by automating the process of linking names and targets without the need for manual arrays.