HTML/JS Help (radio buttons)

AbyssUnderground · 12-07-2010, 16:38

A long time programmer here for some help, what are the chances?

Something I've never done before, and I need to do it now (well rather a friend does). Basically the radio button (the ones that have the dot in them, not a tick), we have about 80 of them on a page, in groups of 5, in a table each in their own <td>.

What we want to do is be able to click the <td> element of the table (which is large compared to the radio button) and have it select the radio button, rather than having to click on the button itself which can be too fiddly and time consuming.

Does anyone know how to do this? I tried using <label for="radio_id"> but that only works on text but the <td>, as the <td> is a higher element than <label> is.

Any and all help welcomed and appreciated.

Thanks all,

Andy.

haydnwalker · 12-07-2010, 16:56

Quick google turned up this ==> http://www.dynamicdrive.com/forums/a...hp/t-3302.html should be what you want

punky · 12-07-2010, 17:05

Something like this...

Code:

<head>
    <script language="javascript">
        function setRadio(t) {

            t.getElementsByTagName("input")[0].checked = true;
        
        }
    </script>
</head>

And then in the table rows:

Code:

    <tr><td onclick="javascript:setRadio(this)">
        <input id="Radio1" type="radio" value="Radio1" />Test value</td><td>Something else</td></tr>
    <tr><td onclick="javascript:setRadio(this)">
        <input id="Radio2" type="radio" value="Radio2" />Test value 2</td><td>Something else 2</td></tr>

Assuming that the radio is the first input element in the table cell.

HTH

Matth · 12-07-2010, 23:52

Combine the scripted TD method with the LABEL one, as the LABEL way will remain active even if script is disabled - always try to fail gracefully!

http://stackoverflow.com/questions/2...-its-parent-td
Similar question, with some solutions that are pure CSS (no script!).

AbyssUnderground · 13-07-2010, 09:14

Cheers guys, I think the last posts solution is the best one for compatibility. Rep on the way.