In this article I will explain how to uncheck a CheckBox when another CheckBox inside CheckBoxList control is checked in ASP.Net using JavaScript.
 
 
Mutually Exclusive CheckBox JavaScript function  
The following JavaScript function accepts CheckBox that was clicked as reference. Using the reference of the CheckBox, its parent Table is determined and all the CheckBoxes present in the Table are fetched.
Then a loop is executed over all CheckBoxes inside the CheckBoxList and all the other CheckBoxes are unchecked.
<script type = "text/javascript">
    function MutExChkList(chk)
    {
        var chkList = chk.parentNode.parentNode.parentNode;
        var chks = chkList.getElementsByTagName("input");
        for(var i=0;i<chks.length;i++)
        {
            if(chks[i] != chk && chk.checked)
            {
                chks[i].checked=false;
            }
        }
    }
</script>
 
 
Calling the JavaScript function when CheckBoxList's CheckBoxes are clicked
There are two ways to call the JavaScript function when the CheckBox is clicked.
1. Direct Method
The easiest way to set JavaScript OnClick event handler to the CheckBoxList’s ListItem as shown below. Though this method works, but it will generate Visual Studio warnings, which could be annoying to some users and hence if you don’t like this method, you can use the 2nd method.
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
    <asp:ListItem Text="Mango" Value="1" onclick="MutExChkList(this);" />
    <asp:ListItem Text="Apple" Value="2" onclick="MutExChkList(this);" />
    <asp:ListItem Text="Banana" Value="3" onclick="MutExChkList(this);" />
    <asp:ListItem Text="Guava" Value="4" onclick="MutExChkList(this);" />
    <asp:ListItem Text="Orange" Value="5" onclick="MutExChkList(this);" />
</asp:CheckBoxList>
 
2. Code Behind Method
In this method, the JavaScript OnClick event handler is assigned from code behind ij. A loop is executed over the CheckBoxList items and the JavaScript OnClick event handler is set.
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
    <asp:ListItem Text="Mango" Value="1" />
    <asp:ListItem Text="Apple" Value="2" />
    <asp:ListItem Text="Banana" Value="3" />
    <asp:ListItem Text="Guava" Value="4" />
    <asp:ListItem Text="Orange" Value="5" />
</asp:CheckBoxList>
 
C#
protected void Page_Load(object sender, EventArgs e)
{
    for (int i = 0; i < CheckBoxList1.Items.Count; i++)
    {
        CheckBoxList1.Items[i].Attributes.Add("onclick", "MutExChkList(this)");   
    }
}
 
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    For i As Integer = 0 To CheckBoxList1.Items.Count - 1
        CheckBoxList1.Items(i).Attributes.Add("onclick", "MutExChkList(this)")
    Next
End Sub
 
 
Screenshot
Uncheck a CheckBox when another CheckBox is checked in ASP.Net
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code (3.41 kb)