First of all, let me present the design philosophy of this realization of mutually exclusive checkboxes.
1. We will have a group of checkboxes with same css class name. We will not need the id of checkboxes besides for associating label to display text and make label clickable.
2. For our example, initially we will check one of the checkboxes. You may wish not to and this will work.
3. We can add any number of such groups of checkboxes but each group will have distinct class name. For example, one group of checkboxes can have class name ‘class1’ and other can have ‘class2’ and so on.
4. When a checkbox is checked, if it is already checked nothing will happen, otherwise this checkbox will be checked and all other checkboxes having the same class name as of this checked one will be unchecked.
5. If a checkbox is unchecked, we re-check it, since we want at least one checkbox checked. We can let a checkbox get unchecked if our requirement does not demand at least one option checked, but for this tutorial we will not let so.
By this time we have realized the need and design philosophy of implementing mutually exclusive checkboxes in asp.net using jquery. Now let’s proceed on.
We need the latest version of jquery which is available here [latest version is jquery 1.3.2 till date].
Now reference the jquery library file in the head section of the design page.
Fig:2 jQuery libray referenced in the header section of asp.net design page
Here goes the design markup code in the aspx page.
<form id="form1" runat="server">
<asp:Label ID="lblResult" runat="server" ForeColor="Green"></asp:Label>
I like to mix
<input type="checkbox" id="aspnet" class="firstClass" checked="checked" runat="server"/>
<input type="checkbox" id="php" class="firstClass" runat="server"/>
<input type="checkbox" id="jsp" class="firstClass" runat="server"/>
<input type="checkbox" id="asp" class="firstClass" runat="server"/>
<br /><br /> with
<input type="checkbox" id="jquery" class="secondClass" checked="checked" runat="server"/>
<input type="checkbox" id="aspnetajax" class="secondClass" runat="server"/>
<label for="aspnetajax">asp.net ajax</label>
<input type="checkbox" id="thirdajax" class="secondClass" runat="server">
<label for="thirdajax">third party ajax</label>
<br /><br />
<asp:Button ID="btnResult" runat="server" OnClick="btnResult_Click" Text="Show Result!" />
As shown in the page code above, we have three different groups of checkboxes having class names firstClass and secondClass. Each group has one checkbox checked initially.
Now is the time to use and understand the jquery script in the page. Here is the complete code in the script block.
//toggle all checkboxes in toggleContainer div
Explanation of jquery code snippet
1. We put all the codes that are required to run at the page load within document’s ready event handler code block, so the first line.
2. toggleContainer is the div element we put all our checkboxes. We have done this to avoid collision with other checkboxes in the page. For all checkboxes [as by :checkbox selector] within this div element we bind change event. So, the following code block will execute when any checkbox is checked or unchecked.
3. In the change event, we read the class name of the current checkbox in thisClass variable. Note that we are reading the value of attribute class [as by .attr method, used to get or set value of an attribute]
4. If this checkbox has attribute ‘checked’, this means we are checking this checkbox exclusive of others in its group. So we uncheck all checkboxes other than itself having class name of this checkbox [stored in variable thisClass]. How we achieve this- uncheck all checkboxes other than this? Answer is: using : not[itself] selector. This selector excludes the matching dom element from the result.
5. If this class has no ‘checked’ attribute, this means the previously checked chexbox has been tried to uncheck which we prevent by re-checking this checkbox since this violates our design philosophy.
Remember the Show Result button in the pages? Yeah, we will publish the result as of user’s selections. Here goes the code-behind code snippet.
//prints your choices in the result label
protected void btnResult_Click(object sender, EventArgs e)
string result = "Oh, you like to mix ";
result += "asp";
else if (aspnet.Checked)
result += "asp.net";
else if (php.Checked)
result += "php";
result += "jsp";
result += " with ";
result += "jquery ajax!";
else if (aspnetajax.Checked)
result += "asp.net ajax!";
result += "other third party ajax!";
result += "";
lblResult.Text = result;