ASPNet Select Single Only One CheckBox from CheckBoxList

In this article I will explain with an example, how to select Single (Only One) CheckBox from CheckBoxList in ASP.Net.

By default, CheckBoxList has multiple CheckBoxes and CheckBoxes are meant for multiple selection, thus in order to make it work as Single selection i.e. similar to that of a RadioButtonList, JavaScript needs to be used to achieve the same.

JavaScript function to select Single (Only One) CheckBox from CheckBoxList in ASP.Net

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.

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 2^nd 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. 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>

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)");