In this article I will explain with an example, how to implement mutually exclusive CheckBoxList control in ASP.Net using C# and VB.Net.
CheckBoxList mutually exclusive i.e. make it work similar to RadioButtonList where user can select only one item (option) from the list of items (options) and at the same time it is possible to uncheck the CheckBox in CheckBoxList which is not possible in the case of RadioButtonList.
The ASP.Net RadioButtons and RadioButtonList controls provide mutual exclusion i.e. one can select only one out of N items if another item is selected the previous one gets unselected.
Problem with RadioButtons and RadioButtonList controls is that once a check is made in the group of RadioButtons then it cannot be unchecked i.e. it is not possible to return to the state when all were unchecked.
The ASP.Net CheckBox or CheckBoxList controls are made mutually exclusive by using
JavaScript so that the following functions can be done:
1. User can select only one item (option).
2. User can also uncheck his selection and leave all CheckBoxes blank.
JavaScript function for implementing Mutually Exclusive CheckBox
The following
MutExChkList JavaScript function accepts the reference CheckBox that was clicked as parameter.
Using the reference of the CheckBox, its parent Table is determined and the reference of all the CheckBoxes present in the Table are fetched.
Then, a FOR loop is executed over the CheckBoxes inside the CheckBoxList and except the CheckBox that was clicked, all 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>
Implementing mutually exclusive CheckBoxList using JavaScript on Client side
HTML Markup
The following HTML Markup consists of:
CheckBoxList – For displaying multiple CheckBoxes.
Each
ListItem in the CheckBoxList have been assigned with
JavaScript onclick event handler.
Note: The easiest way to set
JavaScript onclick event handler to the
CheckBoxList ListItem as shown below. Though this method works, but it will generate Visual Studio warnings, which could be annoying.
Hence, if you don’t like this method, you can use Server Side method which will be discussed later in this article.
<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>
Implementing mutually exclusive CheckBoxList using JavaScript on Server Side
HTML Markup
The following HTML Markup consists of:
CheckBoxList – For displaying multiple CheckBoxes.
<asp:CheckBoxList ID="CheckBoxList2" 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>
Adding the JavaScript function to CheckBoxList Items
Inside the
Page Load event handler, a FOR loop is executed over the CheckBoxList
ListItem and
JavaScript onclick attribute assigned to each
ListItem.
C#
protected void Page_Load(object sender, EventArgs e)
{
for (int i = 0; i < CheckBoxList2.Items.Count; i++)
{
CheckBoxList2.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 CheckBoxList2.Items.Count - 1
CheckBoxList2.Items(i).Attributes.Add("onclick", "MutExChkList(this)")
Next
End Sub
Screenshot
![Mutually Exclusive CheckBoxList Control in ASP.Net]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
