How to make radio buttons placed inside a gridview as single selection using Javascript?

In the following example I have described how to make radio buttons placed inside a gridview to work as a single selection(RadioButtonList).


Gridview:

<asp:GridView ID="grdEmployees" runat="server" AutoGenerateColumns="false">

            <Columns>

                <asp:TemplateField>

                    <HeaderTemplate>

                        Employee Name</HeaderTemplate>

                    <ItemTemplate>

                        <asp:Label ID="lblName" runat="server" Text='<%#Bind("Employee_Name") %>'></asp:Label></ItemTemplate>

                </asp:TemplateField>

                <asp:TemplateField>

                    <HeaderTemplate>

                        Employee Address</HeaderTemplate>

                    <ItemTemplate>

                        <asp:Label ID="lblAddress" runat="server" Text='<%#Bind("Employee_Address") %>'></asp:Label></ItemTemplate>

                </asp:TemplateField>

                <asp:TemplateField>

                    <HeaderTemplate>

                        Is Department Head?</HeaderTemplate>

                    <ItemTemplate>

                        <asp:RadioButton ID="rbtnDepartmentHead" runat="server" Checked='<%#Eval("Is_Department_Head") %>' />

                </asp:TemplateField>

            </Columns>

        </asp:GridView>

Then write a javascript method as written below.
Javascript Method: 

<script language="javascript" type="text/javascript">

    function SelectSingleRadiobutton(rdbtnid) {

        var rdBtn = document.getElementById(rdbtnid);

        var rdBtnList = document.getElementsByTagName("input");

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

            if (rdBtnList[i].type == "radio" && rdBtnList[i].id != rdBtn.id) {

                rdBtnList[i].checked = false;

            }

        }

    }

</script>

After that add "OnClick" Event to the radio button placed inside the ItemTemplate of Gridview.

<asp:RadioButton ID="rbtnDepartmentHead" runat="server" Checked='<%#Eval("Is_Department_Head") %>'

                            OnClick="javascript:SelectSingleRadiobutton(this.id)" />

Now, the radio buttons will work as radiobuttonlist.

Thanks and regards,

Prajanuranjan...

Do send me comments if you like my post.