CheckBoxList acts like RadioButtonList

Introduction

This article is about how to use CheckBoxList to work like RadioButtons using JavaScript.

Using the code

Just place the code given below in the head section of your .ASPX page:

<script type="text/javascript" language="javascript">
    function SetChkBx(event) {
        var chkBoxCount = document.getElementById('<%= chkList1.ClientID %>').getElementsByTagName("input");
        for (i = 0; i < chkBoxCount.length; i++) {
            if (chkBoxCount[i].type == 'checkbox')
                chkBoxCount[i].checked = false;
        }
        if (event.target == null) {
            event.srcElement.checked = true;
            alert("You selected " + event.srcElement.value);
        }
        else {
            event.target.checked = true;
            alert("You selected " + event.target.value);
        }
    }
</script>

Points of Interest 

Here is the code, event.target is used which is always null for IExplorer. event.srcElement is used in IExplorer which tell the browser about the source element and and event.target is not null for other browsers. So for other browsers we we use this.

Place the below tag under your <Form> tag.

<asp:CheckBoxList ID="chkList1" runat="server" RepeatDirection="Vertical" 
    RepeatLayout="Flow" OnClick="javascript:SetChkBx(event);">
    <asp:ListItem>Apple</asp:ListItem>
    <asp:ListItem>Mango</asp:ListItem>
    <asp:ListItem>Banana</asp:ListItem>
    <asp:ListItem>Guava</asp:ListItem>
    <asp:ListItem>Grapes</asp:ListItem>
</asp:CheckBoxList>