JSFiddle: Turning a div into a radio button

Issue

http://jsfiddle.net/3ypYW/

<a href=""><div class="service1"><p>Option 1</p></div></a>

I have created a simple div with a hover feature that I'd like to convert into a radio button to be part of a form. I am well versed in forms and divs and CSS and JQuery but I have no idea how, if possible, I could tie them all together to create a radio button that would obviously stick green when selected.

Thanks!

Solution

try this: in your css add a class for the checked style, it could be the same as the hover.

.service1:hover, .checked { background:#66ff99; color:#000; }

add a js call to your link and don´t forget the "#" to stay on page:

<a href="#" onclick="check(this)">...

finally define the js function which adds the .checked class to the div:

<script type="text/javascript">
function check(element) {
    d = element.firstChild;
    d.className = d.className + " checked";
}
</script>

Answered By - robix