toggle radio buttons by anchors..

[Chris]

Can you be more specific? What do you want to achieve by doing this?

[Chris]

Generally the means of achieving this would be to use a HTML label, http://www.w3schools.com/tags/tag_label.asp:

Code: Select all

<form>
    <label>Radio1 <input type="radio" name="radioButton" value="1" /></label>
    <label>Radio2 <input type="radio" name="radioButton" value="2" /></label>
    <label>Radio3 <input type="radio" name="radioButton" value="3" /></label>
</form>

You can also do it with JavaScript, which is quite a work around the easiest way would be to use id's for references:

Code: Select all

<a href="javascript: selectRadio('button1'); void 0">Radio1</a>
<a href="javascript: selectRadio('button2'); void 0">Radio2</a>
<a href="javascript: selectRadio('button3'); void 0">Radio3</a>

<input type="radio" id="button1" name="radioButton" value="1" />
<input type="radio" id="button2" name="radioButton" value="2" />
<input type="radio" id="button3" name="radioButton" value="3" />

<script type="text/javascript">
function selectRadio(id)
{
    var elem = document.getElementById(id);

    var radioButtonGroup = elem.getElementsByTagName( elem.getAttribute('name') );
   
    for( var i in radioButtonGroup )
    {
        radioButtonGroup[i].checked = false;
    }
    elem.checked = true;
}
</script>

Otherwise my advice would be to use jQuery, I'm sure they'll have an easy means of achieving what you want.

[Jackolantern]

Quite easy with jQuery. Just set a click event on the anchors (be sure to either return false in the event callback so the click of the anchor isn't processes in the browser, or set the anchor target to # so nothing happens), and set the radio button. Something like this could be in the event callback:

Code: Select all

$('input[name="raceName"]').prop('checked', true);

I didn't really write out all of the code because I don't know if you use jQuery or have any interest in it. If you want to go that way, let me know, and I will write it up and test it.

[Torniquet]

Use labels. No need for any kind of JS.

Code: Select all

<input type="radio" name="class" id="class1" />
<input type="radio" name="class" id="class2" />

<label for="class1">Select class 1</label>
<label for="class2">Select class 2</label>

You can link a label to an input using the labels 'for' attribute and entering the inputs id.

http://www.w3schools.com/tags/tag_label.asp