visualforce selectRadio --- how to get reference via Javascript?

I have radio button control and from my Javascript, I'm trying to get the array of radio input via javascript getElementsByName()

The first alert: alert(radioTitleDisplay);

returns [object HTMLCollection]

The second alert however, does not fire. And Firebug reports

radioTitleDisplay.options is null.

How can I get access to the radio button. Am I missing something? (I could assign id to each tag from root to childs but I don't want to do that since if I change the structure, I have to change the id too which is not 开发者_StackOverflowrubust.)

<apex:form >
   <apex:selectRadio value="{!titleDisplay}" id="titleDisplayRadio">
       <apex:selectOption itemValue="0" itemLabel="one"  />
       <apex:selectOption itemValue="1" itemLabel="two"  />
       <apex:selectOption itemValue="2" itemLabel="three"  />

       <script type="text/javascript">

          var radioTitleDisplay = document.getElementsByName('{!$Component.titleDisplayRadio}');

          alert(radioTitleDisplay);
          alert(radioTitleDisplay.options);                                     
       </script>
    </apex:selectRadio>
</apex:form>

The rendered visualforce page, one of input tag is:

<input type="radio" value="2" id="thePage:j_id27:titleDisplayRadio:2" 
name="thePage:j_id27:titleDisplayRadio">

---

My suggestion, use jQuery. Helps immensely, especially for digging through iterative and other lists.

What you did here is get a list of input html objects, that list has no options property. HTML DOM radio buttons are disconnected, there is no central object that holds them all.

EDIT: This code will for example alert you the the selected radio button:

var myradios = document.getElementsByName('{!$Component.myRadio}');
for(i = 0; i < myradios.length; i++) 
    if(myradios[i].checked) {
        // now we now the selected index
        alert('Selected value is: ' + myradios[i].value);
    }