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