The ASP.NET Ajax Control Toolkit contains a control extender for making a set of ASP.NET CheckBoxes mutually exclusive [ See HERE ]. In this post I’ll demonstrate implementing Mutually Exclusive CheckBoxes with jQuery.

ASP.NET Checkboxes are, of course, server-side controls. If you’ve been following along with this series, or you using ASP.NET WebMatrix or MVC instead of WebForms, you may want to be leveraging HTML elements instead of server-side controls so my sample code will demonstrate doing this with both HTML input elements (checkboxes) as well as ASP.NET CheckBox controls.

This requires two slightly different methods because of the way ASP.NET emits markup for the ASP.NET CheckBox controls.

Here is a screen shot :

Lets look at the code and then we’ll examine the difference between the two sets of checkboxes.

As you can see, each ASP.NET CheckBox control emits an HTML Input element of type checkbox wrapped in a SPAN tag and that SPAN is assigned our CSS class name “aspmecheckbox”.

That means that instead of just finding and hooking the html checkboxes of a certain class our jQuery code needs to find all the checkbox elements inside a SPAN with a specific class and hook the click event of those checkboxes and “unchecks” all the others when one checkbox is clicked..