Getting value of Radio buttons with Master Pages - asp.net

Question

I have an aspx page that uses a master page. On this page I have a group of radio buttons. I need to get at the checked property for each of the elements in the radio button group in javascript. Before the page was converted to use a master page, the following javascript code worked just fine:
if((!f.rblRegUseVehicles[0].checked) && (!f.rblRegUseVehicles[1].checked))
{
isValid = "false";
}
f is the reference to the form. This worked just fine.
When the page was chanded to use a Master Page, I changed the javascript to the following:
if((!f.<%=rblRegUseVehicles.ClientID%>[0].checked) && (!f.<%=rblRegUseVehicles.ClientID%>[1].checked))
{
isValid = "false";
}
Now, the javascript is failing because it can't find the element. In the "View Source" I have elements with the name:
<input id="ctl00_cphContent_rblRegUseVehicles_0" type="radio" name="ctl00$cphContent$rblRegUseVehicles" value="Yes" />
<input id="ctl00_cphContent_rblRegUseVehicles_1" type="radio" name="ctl00$cphContent$rblRegUseVehicles" value="No" />
The only code that works is
document.<%=Form.ClientID%>.<%=rblRegUseVehicles.ClientID%>_0.checked
I want the javascript to reference the array like before the page was converted to use a Master Page. How can I do that?

Answer 1

This is a part of ASP.NET that has always been difficult. You need to have static javascript that references dynamically created element ids!
This is how I have always solved the problem:
Wrap your RadioButtonList in a div or p or whatever you want:
<div id="yourId">
<asp:RadioButtonList id="radiolist1" runat="server">
<!-- ... -->
</asp:RadioButtonList>
</div>
Which renders to something like this:
<div id="yourId">
<table id="radiolist1" border="0">
<tr>
<td>
<input id="radiolist1_0" type="radio" name="radiolist1" value="Item 1" checked="checked" />
<label for="radiolist1_0">Item 1</label>
</td>
</tr>
<tr>
<td>
<input id="radiolist1_1" type="radio" name="radiolist1" value="Item 2" />
<label for="radiolist1_1">Item 2</label>
</td>
</tr>
</table>
</div>
And this would allow you to have a static javascript function that targets yourId which doesn't get runat="server". Then your javascript would look something like this:
var rbl = document.getElementById("yourId");
isValid = (!rbl.getElementsByTagName("input")[0].checked
&& !rbl.getElementsByTagName("input")[1].checked);

Answer 2

If you want to explore the idea of using jQuery rather than straight javascript, this should do the trick for you.
if ( $('input[id*=rblRegUseVehicles]:checked').length < 0 ) isValid = "false";
The selector gets all checked radiobuttons who's id contains 'rblRegUseVehicles'.
Edit
If you want to stick with your original script,using UniqueID rather than ClientID may work
if((!f.<%=rblRegUseVehicles.UniqueID%>[0].checked) && (!f.<%=rblRegUseVehicles.UniqueID%>[1].checked))
{
isValid = "false";
}