jQuery Mutually exclusive checkboxes in asp.net

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 asp.net using jquery. This certainly is not any new practice. We have already seen such mutually exclusive checkboxes in asp.net 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 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].

Fig:1 jQuery library added in asp.net 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 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>
    <div id="toggleContainer">
        I like to mix  
        <input type="checkbox" id="aspnet" class="firstClass" checked="checked" runat="server"/>
         <label for="aspnet">asp.net</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">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!" />
    </div>
    </form>

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">
      $(document).ready(function(){
            //toggle all checkboxes in toggleContainer div
            $('#toggleContainer :checkbox').bind('change',function(){
                var thisClass=$(this).attr('class');
                if($(this).attr('checked'))
                {
                    $('#toggleContainer :checkbox.'+thisClass+":not(#"+this.id+")").removeAttr('checked');    
                }
                else
                {
                    $(this).attr('checked','checked');                          
                }
            });
        });
    </script>

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

        result += " with ";

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

        result += "";

        lblResult.Text = result;
    }

Fig:4 Mutually exclusive checkboxes in action

Conclusion

In this simple yet descriptive tutorial we implemented mutually exclusive checkboxes in asp.net 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!