View Full Version : howto check a radio button in a table cell?

06-15-2005, 10:47 AM
Another seemingly simple question about Javascript and DOM references:
(I hope it's a simpler answer than the last one - I'll get back to that when this demo project is done)

I'm using a highlighting-row table object - that part is easy:

<table id="whatever" summary="simplified version to post :)">
<tr onmouseover='hilite(this);' onmouseout='unHilite(this);' />
<td> one</td>
<td><input type='radio' id='id1' name='id1' value='some_string"></td>

I want to add an onclick event handler to the row to simply click() the radio button (to make it easier on the lazy user who wants it to act like a select
I would use a select if not for multiple fields that must line up pretty...)

I have tried: this.every.damn.combination.i.could.think.of to try and reference the radio button.

anyone have a clue? I know I don't. (life is much simpler on the server side)

Thanks in advance

06-15-2005, 04:43 PM
<tr onmouseover='hilite(this);' onmouseout='unHilite(this);' onclick="document.getElementById('id1').checked=1;"/>
didn't work?

06-15-2005, 07:19 PM

sorry, it was late - I guess I only listed one table row-

there will be n-number of rows, each with a radio button, all have the same name so only 1 is checked out of the group. - (eg "I want to edit this particular
table row details out of 500 possibilities")

the "this" object returns the row to the hilite method, so I know it has access
to correct row. however, this.getElementByID('id1').checked=1 doesn't seem to do the job either

I'm confused a lot lately

06-16-2005, 01:35 AM
An extremely simplified solution would be:

function checkControl(row) {
row.getElementsByTagName('input')[0].checked = true;
}but that's wrong on so many levels: no feature detection; accomodates only one input element per row; ignores why the click event occurred: was it meant for a particular purpose rather than checking?

These issues can be addressed, but you'll need to provide a lot more information about the content and structure of this table.

An alternative is to make the content of each cell a label for the checkbox using the label element. This may, or may not, be practical, depending on what the cells contain. Note that it won't actually apply to the row itself.

however, this.getElementByID('id1').checked=1 doesn't seem to do the jobThere are two reasons why:

The method only exists on the document object.
ECMAScript is case-sensitive, so the D needs to be lowercase: getElementById.
If you address that, then you could use gEBI as another solution.


06-16-2005, 09:58 AM
thank you ! :)

this worked -

and yes, the click has no purpose other than allowing a naive user not avoid having to move his mouse a half-inch to click directly on the radio button.
(shiny chrome fins on the demo '57 chevy)

My apologies again for missing simple syntactic things, but last time I tried a hand at client-side scripting, the DOM wasn't even an RFC :)

Thanks again to Mike and jscheuer and the excellent tutorials on this site