Home / AJAX

HOW TO Use the MutuallyExclusiveCheckBox Control

RSS
Modified on 2009/12/24 03:05 by Chris Muench Categorized as Uncategorized

MutuallyExclusiveCheckbox Demonstration













MutuallyExclusiveCheckbox Description

MutuallyExclusiveCheckBox is an ASP.NET AJAX extender that can be attached to any ASP.NET CheckBox control. By adding a number of checkboxes to the same "Key", only one checkbox with the specified key can be checked at a time. This extender is useful when a number of choices are available but only one can be chosen, similar to a radio button. The use of checkboxes however allows you to choose to uncheck a value which is not possible normally with radio buttons. This also provides a more consistent and expected interface than using javascript to allow the de-selection of a RadioButton item.

Video - How Do I: Use the ASP.NET AJAX MutuallyExclusiveCheckbox Control?

MutuallyExclusiveCheckbox Client Code Sample

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <style type="text/css"> </style> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/extended/ExtendedControls.debug.js" type="text/javascript"></script> <script type="text/javascript"> Sys.debug = true; Sys.require(Sys.components.mutuallyExclusiveCheckBox, function() { $("#cb1").mutuallyExclusiveCheckBox("[A]"); $("#cb2").mutuallyExclusiveCheckBox("[B]"); $("#cb3").mutuallyExclusiveCheckBox("[C]"); $("#cb4").mutuallyExclusiveCheckBox("[D]");

$("#cb1a").mutuallyExclusiveCheckBox("[A]"); $("#cb2a").mutuallyExclusiveCheckBox("[B]"); $("#cb3a").mutuallyExclusiveCheckBox("[C]"); $("#cb4a").mutuallyExclusiveCheckBox("[D]"); }); </script> </head> <body>

<div style="float:left"> <input type="checkbox" id="cb1" /><br /> <input type="checkbox" id="cb2" /><br /> <input type="checkbox" id="cb3" /><br /> <input type="checkbox" id="cb4" /><br /> </div>

<div style="float:left"> <input type="checkbox" id="cb1a" /><br /> <input type="checkbox" id="cb2a" /><br /> <input type="checkbox" id="cb3a" /><br /> <input type="checkbox" id="cb4a" /><br /> </div> </body> </html>

MutuallyExclusiveCheckbox Client Properties

MutuallyExclusiveCheckbox Server Code Sample

        <table>
            <tr>
	            <td>
	                <b>Must Have</b><br />
		            <asp:Checkbox runat="server" ID="MustHaveGuestBedroomCheckBox" 
		                Text="Guest Bed Downstairs" /><br />
	                <ajaxToolkit:MutuallyExclusiveCheckboxExtender runat="server" ID="MustHaveGuestBedroomCheckBoxEx" 
	                    TargetControlID="MustHaveGuestBedroomCheckBox" 
	                    Key="GuestBedroomCheckBoxes" />
		            
		            <asp:Checkbox runat="server" ID="MustHaveSplitPlanCheckBox" 
		                Text="Split Plan" /><br />
	                <ajaxToolkit:MutuallyExclusiveCheckboxExtender runat="server" ID="MustHaveSplitPlanCheckBoxEx" 
	                    TargetControlID="MustHaveSplitPlanCheckBox" 
	                    Key="SplitPlanCheckBoxes" />
		            
		            <asp:Checkbox runat="server" ID="MustHaveCoveredPatioCheckBox" 
		                Text="Covered Patio" /><br />
	                <ajaxToolkit:MutuallyExclusiveCheckboxExtender runat="server" ID="MustHaveCoveredPatioCheckBoxEx" 
	                    TargetControlID="MustHaveCoveredPatioCheckBox" 
	                    Key="CoveredPatioCheckBoxes" />
		            
		            <asp:Checkbox runat="server" ID="MustHaveGatedCommunityCheckBox" 
		                Text="Gated Community" /><br />
	                <ajaxToolkit:MutuallyExclusiveCheckboxExtender ID="MustHaveGatedCommunityCheckBoxEx" runat="server" 
	                    TargetControlID="MustHaveGatedCommunityCheckBox" 
	                    Key="GatedCommunityCheckBoxes" />
		            
		            <asp:Checkbox runat="server" ID="MustHaveGolfCommunityCheckBox" 
		                Text="Golf Community" /><br />
	                <ajaxToolkit:MutuallyExclusiveCheckboxExtender runat="server" ID="MustHaveGolfCommunityCheckBoxEx" 
	                    TargetControlID="MustHaveGolfCommunityCheckBox" 
	                    Key="GolfCommunityCheckBoxes" />
		            
		            <asp:Checkbox runat="server" ID="MustHaveCommunityPoolCheckBox" 
		                Text="Community Pool" /><br />
	                <ajaxToolkit:MutuallyExclusiveCheckboxExtender runat="server" ID="MustHaveCommunityPoolCheckBoxEx" 
	                    TargetControlID="MustHaveCommunityPoolCheckBox" 
	                    Key="CommunityPoolCheckBoxes" />
		            
		            <asp:Checkbox runat="server" ID="MustHaveSoldOutCheckBox" 
		                Text="Sold Out" />
	                <ajaxToolkit:MutuallyExclusiveCheckboxExtender runat="server" ID="MustHaveSoldOutCheckBoxEx" 
	                    TargetControlID="MustHaveSoldOutCheckBox" 
	                    Key="SoldOutCheckBoxes" />
	            </td>
	            <td>
	                <b>Must Not Have</b><br />
		            <asp:Checkbox runat="server" id="MustNotHaveGuestBedroomCheckBox"
		                Text="Guest Bed Downstairs" /><br />
	                <ajaxToolkit:MutuallyExclusiveCheckboxExtender ID="MutuallyExclusiveCheckboxExtender1" runat="server"
	                    TargetControlID="MustNotHaveGuestBedroomCheckBox"
	                    Key="GuestBedroomCheckBoxes" />
		            
		            <asp:Checkbox runat="server" id="MustNotHaveSplitPlanCheckBox"
		                Text="Split Plan" /><br />
	                <ajaxToolkit:MutuallyExclusiveCheckboxExtender ID="MutuallyExclusiveCheckboxExtender2" runat="server"
	                    TargetControlID="MustNotHaveSplitPlanCheckBox"
	                    Key="SplitPlanCheckBoxes" />
		            
		            <asp:Checkbox runat="server" id="MustNotHaveCoveredPatioCheckBox"
		                Text="Covered Patio" /><br />
	                <ajaxToolkit:MutuallyExclusiveCheckboxExtender ID="MutuallyExclusiveCheckboxExtender3" runat="server"
	                    TargetControlID="MustNotHaveCoveredPatioCheckBox"
	                    Key="CoveredPatioCheckBoxes" />
		            
		            <asp:Checkbox runat="server" id="MustNotHaveGatedCommunityCheckBox"
		                Text="Gated Community" /><br />
	                <ajaxToolkit:MutuallyExclusiveCheckboxExtender ID="MutuallyExclusiveCheckboxExtender4" runat="server"
	                    TargetControlID="MustNotHaveGatedCommunityCheckBox"
	                    Key="GatedCommunityCheckBoxes" />
		            
		            <asp:Checkbox runat="server" id="MustNotHaveGolfCommunityCheckBox"
		                Text="Golf Community" /><br />
	                <ajaxToolkit:MutuallyExclusiveCheckboxExtender ID="MutuallyExclusiveCheckboxExtender5" runat="server"
	                    TargetControlID="MustNotHaveGolfCommunityCheckBox"
	                    Key="GolfCommunityCheckBoxes" />
		            
		            <asp:Checkbox runat="server" id="MustNotHaveCommunityPoolCheckBox"
		                Text="Community Pool" /><br />
	                <ajaxToolkit:MutuallyExclusiveCheckboxExtender ID="MutuallyExclusiveCheckboxExtender6" runat="server"
	                    TargetControlID="MustNotHaveCommunityPoolCheckBox"
	                    Key="CommunityPoolCheckBoxes" />
		            
		            <asp:Checkbox runat="server" id="MustNotHaveSoldOutCheckBox"
		                Text="Sold Out" />
	                <ajaxToolkit:MutuallyExclusiveCheckboxExtender ID="MutuallyExclusiveCheckboxExtender7" runat="server"
	                    TargetControlID="MustNotHaveSoldOutCheckBox"
	                    Key="SoldOutCheckBoxes" />
	            </td>            
	        </tr>
        </table>


MutuallyExclusiveCheckbox Server Properties

The properties in italics are optional.

<ajaxToolkit:MutuallyExclusiveCheckboxExtender runat="server"
    ID="MustHaveGuestBedroomCheckBoxEx"
    TargetControlID="MustHaveGuestBedroomCheckBox" 
    Key="GuestBedroomCheckBoxes" />

  • TargetControlID - The ID of the CheckBox to modify
  • Key - The unique key to use to associate checkboxes. This key does not respect INamingContainer renaming.

MutuallyExclusiveCheckbox Additional Code Samples