Question

I have a grid view like this :

<telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None" AllowPaging="true"
        PageSize="20" OnPreRender="RadGrid1_PreRender" Width="500px">
        <PagerStyle Mode="NextPrevAndNumeric" />
        <MasterTableView TableLayout="Fixed" Width="500px">
            <ItemTemplate>
                <%# (((GridItem)Container).ItemIndex != 0)? "</td></tr></table>" : "" %>
                <asp:Panel ID="ItemContainer" CssClass='<%# (((GridItem)Container).ItemType == GridItemType.Item)? "item" : "alternatingItem" %>'
                    runat="server">
                    <asp:Image ID="image_event" runat="server" ImageUrl='<%# Eval("event_pic")%>' AlternateText="" />
                    <asp:RadioButton ID="rbtn_map" runat="server" onclientclick="adjustSelected(this)" />
                </asp:Panel>
            </ItemTemplate>
        </MasterTableView>
        <GroupingSettings CaseSensitive="false" />
    </telerik:RadGrid>

---

I wanna through client side method adjustSelected(this) to loop through all the radiobuttons make them unselected and set the clicked one only selected.

Answer 1

Give all those radio buttons in the grid a class (class="radioClass"):

<asp:RadioButton CssClass="radioClass" runat="server" onclientclick="adjustSelected(this)" />

Then use the class to select all others radios:

function adjustSelected(obj){
    $('.radioClass').prop('checked', false);
    this.checked = true;
}

You can also use unobtrusive JavaScript:

var $radios = $('.radioClass');
$('.radioClass').click(function(){
    $radios.prop('checked', false);
    this.checked = true;
});

---

Update:

O.k. ASP.Net generate weird markup, so use this as the function:

function adjustSelected(obj){
    console.log($('.radioClass :radio'));
    $('.radioClass :radio').prop('checked', false);
    $(':radio', obj).prop('checked', true);
}​