I've been searching and searching google for answers to my question but have been unsuccessful so far. I'm hoping one of you guys could give me some assistance.

I have 10 divs with the class name "dividend" holding a table with the classname/id of "container" then two smaller tables inside that. Within the container table at the bottom is a hidden radio button with the name "page1".

I wrote an onClcick for the container table so the user can select the whole table instead of the radio button, but not I'm trying to change the style of the selected container so the users know they have selected it.

I have tried a few different methods and I'm able to change the style to the new class by just writing

 document.getElementById('container').className = 'selected';

But because all 10 divs share the same name it will only change the style of the first element it finds.

So I tried writing this loop to check if there are any selected radios in the document then to change the else name the style as the default.

I'm sure its something stupid but I'm pretty stumped atm.. Any help would be appreciated.

Thanks.

selected = function () {
var divs = document.getElementByTagName('DIV'),
    div,
    tbl,
    rad,
    stat,
    i;

    for (i = 0; i < divs.length; i++) {

        div = divs.id;

        if (div == 'dividend') {
            tbl = div.getElementById('container');
            rad = tbl.getElementByTagName('INPUT');

                if (rad.checked = true) {
                    tbl.className = 'selected'; 
                } 
        }

    }

};