Changing the radio button as Anchor Buttons 1.9.1.0

Question

Is there any way to convert the radio buttons into buttons so that it can be directly clicked as a button.

I have two Custom Options, namely Buy and Rent. I created a custom JS:

$selectHtml .='<script type="text/javascript">'.'function clicking(){opConfig.reloadPrice();productAddToCartForm.submit(this);}'.'</script>'.

and added the clicking function to onClick of Radio Button.

This is working fine. But i want a seperate Button Something like this:

<button onClick="clicking();"> Click here for rent </button><br>
<button onClick="clicking();"> Click here for buy </button>

But for this we need to get the custom option ID and append it to the button (i am assuming)

Answer 1

You can simply hide the radio buttons (display:none) or better yet move them outside the screen (position:absolute; left:-99999px) and the label will remain visible. When clicking on it it will check the radio button but the user won't see the radio.