A CheckBoxList is a list of checkboxes grouped together under one control. It’s used to provide to the end user the ability to select multiple items for one property, such as selecting a list of desired places to work. But, what If you want your CheckBoxList to only allow one selecting? It’s quite easy to achieve that by using JavaScript.

In this tutorial, I will explain in details how to limit the selection of CheckBoxList item to one. First, let’s create a checkbox list and add a few items to it.



        <b>Where would you like to retire?</b>
        <asp:CheckBoxList ID="myCheckBoxList" runat="server">
            <asp:ListItem Text="Bahamas" Value="Bahamas" onclick="CheckOnlyOneCheckBox(this);" />
            <asp:ListItem Text="Florida" Value="Florida" onclick="CheckOnlyOneCheckBox(this);" />
            <asp:ListItem Text="Hawaii" Value="Hawaii" onclick="CheckOnlyOneCheckBox(this);" />
            <asp:ListItem Text="Thailand" Value="Thailand" onclick="CheckOnlyOneCheckBox(this);" />
            <asp:ListItem Text="Vermont" Value="Vermont" onclick="CheckOnlyOneCheckBox(this);" />

Now, copy the JavaScript function below into your markup or in a separate JavaScript file. This function takes a checkbox item as an argument, then uncheck all other checkboxes within the CheckBoxList using a loop.


    <script type="text/javascript">
        function CheckOnlyOneCheckBox(checkbox) 
            var checkBoxList = checkbox.parentNode.parentNode.parentNode;
            var list = checkBoxList.getElementsByTagName("input");
            for (var i = 0; i < list.length; i++) 
                if (list[i] != checkbox && checkbox.checked) 
                    list[i].checked = false;

Run the application

Allow only one selection of CheckBoxList in ASP.NET

Related Articles

Last modified: June 1, 2019


Write a Reply or Comment

Your email address will not be published.