Wednesday, October 28, 2009

jQuery Mutually exclusive checkboxes in

We often see radio buttons to implement single choices out of many in web forms. Wouldn’t it be better if we could imply ‘choose one option from many’ using checkboxes? I have implemented such mutually exclusive checkboxes in using jquery. This certainly is not any new practice. We have already seen such mutually exclusive checkboxes in ajax, and perhaps there are others also. But achieving this functionality using a lightweight javascript library like jquery would be a benefit. So let’s start the race.

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 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].

Fig:1 jQuery library added in website project

Now reference the jquery library file in the head section of the design page.

Fig:2 jQuery libray referenced in the header section of 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>
<div id="toggleContainer">
I like to mix
<input type="checkbox" id="aspnet" class="firstClass" checked="checked" runat="server"/>
<label for="aspnet"></label>
<input type="checkbox" id="php" class="firstClass" runat="server"/>
<label for="php">php</label>
<input type="checkbox" id="jsp" class="firstClass" runat="server"/>
<label for="jsp">jsp</label>
<input type="checkbox" id="asp" class="firstClass" runat="server"/>
<label for="asp">asp</label>
<br /><br /> with
<input type="checkbox" id="jquery" class="secondClass" checked="checked" runat="server"/>
<label for="jquery">jquery</label>
<input type="checkbox" id="javascript" class="secondClass" runat="server"/>
<label for="javascript">pure javascript</label>
<input type="checkbox" id="aspnetajax" class="secondClass" runat="server"/>
<label for="aspnetajax"> 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!" />

Fig:3 Mutually exclusive checkboxes at initial state

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.

<script type="text/javascript">
//toggle all checkboxes in toggleContainer div
$('#toggleContainer :checkbox').bind('change',function(){
var thisClass=$(this).attr('class');
$('#toggleContainer :checkbox.'+thisClass+":not(#"")").removeAttr('checked');

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.

That’s all.

Reading Result

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 ";
if (asp.Checked)
result += "asp";
else if (aspnet.Checked)
result += "";
else if (php.Checked)
result += "php";
result += "jsp";

result += "
with ";

if (jquery.Checked)
result += "jquery ajax!";
else if (javascript.Checked)
result += "pure javascript ajax!";
else if (aspnetajax.Checked)
result += " ajax!";
result += "other third party ajax!";

result += "

lblResult.Text = result;

Fig:4 Mutually exclusive checkboxes in action


In this simple yet descriptive tutorial we implemented mutually exclusive checkboxes in using latest javascript jquery library. Since we used class property of checkboxes, we have been able to implement this with any number of distinct groups of checkboxes. If you enjoyed this tutorial, please spread the words: bookmark this, share your opinions via comments or email this article etcetera! Happy programming!

kick it on


Anonymous said...

I get it but... good ui design uses paradigms that people already understand to make the design more usable. In this case, it is a well understood and established paradigm that radio buttons allow a single choice of many while checkboxes allow multiple choices.

If I was presented with this UI, i would be confused, and thus, think that the UI is bad.

Please see:

Balaji said...

Have you given any thoughts to "Unlock User in membership login system"? I've been hard pressed to find good resources, and judging from this article I'm guessing you may have something valuable to say. Thanks in advance!

Unknown said...

Here in, I have presented the membership way to unlock a user. Thanks.

dimpy said...

very clearly explanatory...... i feel easy to understand your post

Anonymous said...

its interesting for examples visit

mohiddin said...

i tried that thanks for Php checkboxes visit

Anonymous said...

Great article, but got question,
if my class contain multiple names,it stop working. For example if you change class="secondClass" to class="secondClass checkbox". Do you have an idea how to fix it?

Unknown said...

We have grouped the checkboxes by class names. Each group has unique class name. So you should give unique class names to the logically grouped checkboxes.

Post a Comment

Hope you liked this post. You can leave your message or you can put your valuable suggestions on this post here. Thanks for the sharing and cooperation!

Popular Posts

Recent Articles