Getting attribute for selected value from asp:RadioButtonList with jQuery

Question

I'm maintaining some old c# code and there's an asp:RadioButtonList...

<asp:RadioButtonList AutoPostBack="false" TextAlign="Right" RepeatDirection="Horizontal" RepeatLayout="Flow" runat="server" ID="radIncidentType" />

... which is populated in the code behind like so:

    public static void PopulateRBL(string ListName, ref RadioButtonList ListToPopulate)
    {
        List<Lookup> radioList = GetLookup(ListName);  //returns
        foreach (Lookup entry in radioList)
        {
            ListItem item = new ListItem(" " + entry.Description + " ", entry.Code);
            item.Attributes.Add("ItemId", entry.Id.ToString());
            ListToPopulate.Items.Add(item);
        }
    }

So each item added has a description, a code, and an extra attribute ItemId.

There's then some validation performed on the onChange which has to interrogate the ItemId attribute. Currently is does it like this:

$('#ctl00_cphPage_radIncidentType input[type=radio]:checked').closest('span').attr('ItemId')

Which was working fine until I added a nested masterpage and to get it working I had to change the selector to:

$('#ctl00_ctl00_cphPage_nestedPage_radIncidentType input[type=radio]:checked').closest('span').attr('ItemId')

Obviously I'd like a neater selector, I've tried:

$('#<%= radIncidentType.ClientID %> input[type=radio]:checked').closest('span').attr('ItemId')

and ...

$("input[name='<%=radIncidentType.UniqueID%>']:radio:checked").closest('span').attr('ItemId')

...but neither work. Can anyone suggest a way of getting the value for that ItemId attribute?

Answer 1

I tried the following and it works as desired...

$("[id$='_radIncidentType'] input[type=radio]:checked").closest('span').attr("ItemId")

Answer 2

It's not very clear when you want the value of ItemId. But in this snippet a listener is added to the RadioButtonList and gets the Attribute when a RadioButton is clicked.

<script type="text/javascript">
    $('#<%= radIncidentType.ClientID %> input[type="radio"]').click(function () {
        var ItemId = $(this).closest('span').attr("ItemId");
        alert(ItemId);
    });
</script>

Or an externally triggered function to get the attribute from the selected RadioButton.

<script type="text/javascript">
    function getItemIdFromRadioButtonList() {
        $('#<%= radIncidentType.ClientID %> input[type="radio"]:checked').each(function () {
            var ItemId = $(this).closest('span').attr("ItemId");
            alert(ItemId);
        });
    }
</script>