Initial chamber

Step 1: Open Visual Studio 2010 and create an empty website. Give it a suitable name [Checkbox_demo].

Step 2: In Solution Explorer you will get your empty website, then add a Web Form. Follow the below given steps:

For Web Form:

Checkbox_demo (Your Empty Website) - Right Click, Add New Item, then Web Form. Name it chekbox_demo.aspx.

Design chamber

Step 3: Now open Checkbox_demo.aspx file and make some design code to build up your application like the following:

Checkbox_demo.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  3. <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  7. <html xmlns="http://www.w3.org/1999/xhtml">
  9. <head runat="server">
  10. <title></title>
  11. <style type="text/css">
  12. .style1 {
  13. width: 141px;
  14. }
  16. .style2 {
  17. width: 159px;
  18. }
  20. .style3 {
  21. width: 158px;
  22. }
  24. .style4 {
  25. width: 188px;
  26. }
  28. .style5 {
  29. width: 188px;
  30. font-weight: bold;
  31. text-align: center;
  32. color: #FFCCCC;
  33. background-color: #0000FF;
  34. }
  36. .style6 {
  37. width: 158px;
  38. font-weight: bold;
  39. text-align: center;
  40. color: #FFCCCC;
  41. background-color: #0000FF;
  42. }
  44. .style7 {
  45. width: 159px;
  46. font-weight: bold;
  47. text-align: center;
  48. color: #FFCCCC;
  49. background-color: #0000FF;
  50. }
  52. .style8 {
  53. width: 141px;
  54. font-weight: bold;
  55. text-align: center;
  56. color: #FFCCCC;
  57. background-color: #0000FF;
  58. }
  60. .style9 {
  61. font-weight: bold;
  62. text-align: center;
  63. color: #FFCCCC;
  64. background-color: #0000FF;
  65. }
  66. </style>
  67. </head>
  69. <body>
  70. <form id="form1" runat="server">
  71. <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
  72. </asp:ToolkitScriptManager>
  73. <div>
  75. <table style="width:100%;">
  76. <tr>
  77. <td class="style8">
  78. <strong>Favourite Sport</strong></td>
  79. <td class="style7">
  80. Favourite Color</td>
  81. <td class="style6">
  82. Favourite Actor</td>
  83. <td class="style5">
  84. Favourtie Movie</td>
  85. <td class="style9">
  86. Favourite Programming Languages</td>
  87. </tr>
  88. <tr>
  89. <td class="style1">
  90. </td>
  91. <td class="style2">
  92. </td>
  93. <td class="style3">
  94. </td>
  95. <td class="style4">
  96. </td>
  97. <td>
  98. </td>
  99. </tr>
  100. <tr>
  101. <td class="style1">
  103. <asp:CheckBox ID="CheckBox1" runat="server" Text="Hockey" />
  104. <asp:MutuallyExclusiveCheckBoxExtender ID="CheckBox1_MutuallyExclusiveCheckBoxExtender" runat="server" Enabled="True" Key="Favourite Sport" TargetControlID="CheckBox1">
  105. </asp:MutuallyExclusiveCheckBoxExtender>
  106. </td>
  107. <td class="style2">
  108. <asp:CheckBox ID="CheckBox5" runat="server" Text="Red" />
  109. <asp:MutuallyExclusiveCheckBoxExtender ID="CheckBox5_MutuallyExclusiveCheckBoxExtender" runat="server" Enabled="True" Key="Favourite Color" TargetControlID="CheckBox5">
  110. </asp:MutuallyExclusiveCheckBoxExtender>
  111. </td>
  112. <td class="style3">
  113. <asp:CheckBox ID="CheckBox9" runat="server" Text="Bruce Wills" />
  114. <asp:MutuallyExclusiveCheckBoxExtender ID="CheckBox9_MutuallyExclusiveCheckBoxExtender" runat="server" Enabled="True" Key="Favourite Actor" TargetControlID="CheckBox9">
  115. </asp:MutuallyExclusiveCheckBoxExtender>
  116. </td>
  117. <td class="style4">
  118. <asp:CheckBox ID="CheckBox13" runat="server" Text="ZombieLand" />
  119. <asp:MutuallyExclusiveCheckBoxExtender ID="CheckBox13_MutuallyExclusiveCheckBoxExtender" runat="server" Enabled="True" Key="Favourtie Movie" TargetControlID="CheckBox13">
  120. </asp:MutuallyExclusiveCheckBoxExtender>
  121. </td>
  122. <td>
  123. <asp:CheckBox ID="CheckBox17" runat="server" Text="Asp.Net" />
  124. <asp:MutuallyExclusiveCheckBoxExtender ID="CheckBox17_MutuallyExclusiveCheckBoxExtender" runat="server" Enabled="True" Key="Favourite Programming Languages" TargetControlID="CheckBox17">
  125. </asp:MutuallyExclusiveCheckBoxExtender>
  126. </td>
  127. </tr>
  128. <tr>
  129. <td class="style1">
  130. <asp:CheckBox ID="CheckBox2" runat="server" Text="Cricket" />
  131. <asp:MutuallyExclusiveCheckBoxExtender ID="CheckBox2_MutuallyExclusiveCheckBoxExtender" runat="server" Enabled="True" Key="Favourite Sport" TargetControlID="CheckBox2">
  132. </asp:MutuallyExclusiveCheckBoxExtender>
  133. </td>
  134. <td class="style2">
  135. <asp:CheckBox ID="CheckBox6" runat="server" Text="Yellow" />
  136. <asp:MutuallyExclusiveCheckBoxExtender ID="CheckBox6_MutuallyExclusiveCheckBoxExtender" runat="server" Enabled="True" Key="Favourite Color" TargetControlID="CheckBox6">
  137. </asp:MutuallyExclusiveCheckBoxExtender>
  138. </td>
  139. <td class="style3">
  140. <asp:CheckBox ID="CheckBox10" runat="server" Text="Will Smith" />
  141. <asp:MutuallyExclusiveCheckBoxExtender ID="CheckBox10_MutuallyExclusiveCheckBoxExtender" runat="server" Enabled="True" Key="Favourite Actor" TargetControlID="CheckBox10">
  142. </asp:MutuallyExclusiveCheckBoxExtender>
  143. </td>
  144. <td class="style4">
  145. <asp:CheckBox ID="CheckBox14" runat="server" Text="Up" />
  146. <asp:MutuallyExclusiveCheckBoxExtender ID="CheckBox14_MutuallyExclusiveCheckBoxExtender" runat="server" Enabled="True" Key="Favourtie Movie" TargetControlID="CheckBox14">
  147. </asp:MutuallyExclusiveCheckBoxExtender>
  148. </td>
  149. <td>
  150. <asp:CheckBox ID="CheckBox18" runat="server" Text="Java" />
  151. <asp:MutuallyExclusiveCheckBoxExtender ID="CheckBox18_MutuallyExclusiveCheckBoxExtender" runat="server" Enabled="True" Key="Favourite Programming Languages" TargetControlID="CheckBox18">
  152. </asp:MutuallyExclusiveCheckBoxExtender>
  153. </td>
  154. </tr>
  155. <tr>
  156. <td class="style1">
  157. <asp:CheckBox ID="CheckBox3" runat="server" Text="Basketball" />
  158. <asp:MutuallyExclusiveCheckBoxExtender ID="CheckBox3_MutuallyExclusiveCheckBoxExtender" runat="server" Enabled="True" Key="Favourite Sport" TargetControlID="CheckBox3">
  159. </asp:MutuallyExclusiveCheckBoxExtender>
  160. </td>
  161. <td class="style2">
  162. <asp:CheckBox ID="CheckBox7" runat="server" Text="Pink" />
  163. <asp:MutuallyExclusiveCheckBoxExtender ID="CheckBox7_MutuallyExclusiveCheckBoxExtender" runat="server" Enabled="True" Key="Favourite Color" TargetControlID="CheckBox7">
  164. </asp:MutuallyExclusiveCheckBoxExtender>
  165. </td>
  166. <td class="style3">
  167. <asp:CheckBox ID="CheckBox11" runat="server" Text="Tom Cruise" />
  168. <asp:MutuallyExclusiveCheckBoxExtender ID="CheckBox11_MutuallyExclusiveCheckBoxExtender" runat="server" Enabled="True" Key="Favourite Actor" TargetControlID="CheckBox11">
  169. </asp:MutuallyExclusiveCheckBoxExtender>
  170. </td>
  171. <td class="style4">
  172. <asp:CheckBox ID="CheckBox15" runat="server" Text="Wolf of the Wall Street" />
  173. <asp:MutuallyExclusiveCheckBoxExtender ID="CheckBox15_MutuallyExclusiveCheckBoxExtender" runat="server" Enabled="True" Key="Favourtie Movie" TargetControlID="CheckBox15">
  174. </asp:MutuallyExclusiveCheckBoxExtender>
  175. </td>
  176. <td>
  177. <asp:CheckBox ID="CheckBox19" runat="server" Text="PHP" />
  178. <asp:MutuallyExclusiveCheckBoxExtender ID="CheckBox19_MutuallyExclusiveCheckBoxExtender" runat="server" Enabled="True" Key="Favourite Programming Languages" TargetControlID="CheckBox19">
  179. </asp:MutuallyExclusiveCheckBoxExtender>
  180. </td>
  181. </tr>
  182. <tr>
  183. <td class="style1">
  184. <asp:CheckBox ID="CheckBox4" runat="server" Text="Tennis" />
  185. <asp:MutuallyExclusiveCheckBoxExtender ID="CheckBox4_MutuallyExclusiveCheckBoxExtender" runat="server" Enabled="True" Key="Favourite Sport" TargetControlID="CheckBox4">
  186. </asp:MutuallyExclusiveCheckBoxExtender>
  187. </td>
  188. <td class="style2">
  189. <asp:CheckBox ID="CheckBox8" runat="server" Text="Green" />
  190. <asp:MutuallyExclusiveCheckBoxExtender ID="CheckBox8_MutuallyExclusiveCheckBoxExtender" runat="server" Enabled="True" Key="Favourite Color" TargetControlID="CheckBox8">
  191. </asp:MutuallyExclusiveCheckBoxExtender>
  192. </td>
  193. <td class="style3">
  194. <asp:CheckBox ID="CheckBox12" runat="server" Text="Brad Pitt" />
  195. <asp:MutuallyExclusiveCheckBoxExtender ID="CheckBox12_MutuallyExclusiveCheckBoxExtender" runat="server" Enabled="True" Key="Favourite Actor" TargetControlID="CheckBox12">
  196. </asp:MutuallyExclusiveCheckBoxExtender>
  197. </td>
  198. <td class="style4">
  199. <asp:CheckBox ID="CheckBox16" runat="server" Text="Dragon Ballz" />
  200. <asp:MutuallyExclusiveCheckBoxExtender ID="CheckBox16_MutuallyExclusiveCheckBoxExtender" runat="server" Enabled="True" Key="Favourtie Movie" TargetControlID="CheckBox16">
  201. </asp:MutuallyExclusiveCheckBoxExtender>
  202. </td>
  203. <td>
  204. <asp:CheckBox ID="CheckBox20" runat="server" Text="Python" />
  205. <asp:MutuallyExclusiveCheckBoxExtender ID="CheckBox20_MutuallyExclusiveCheckBoxExtender" runat="server" Enabled="True" Key="Favourite Programming Languages" TargetControlID="CheckBox20">
  206. </asp:MutuallyExclusiveCheckBoxExtender>
  207. </td>
  208. </tr>
  209. <tr>
  210. <td class="style1">
  211. </td>
  212. <td class="style2">
  213. </td>
  214. <td class="style3">
  215. </td>
  216. <td class="style4">
  217. </td>
  218. <td>
  219. </td>
  220. </tr>
  221. <tr>
  222. <td class="style1">
  223. </td>
  224. <td class="style2">
  225. </td>
  226. <td class="style3">
  227. </td>
  228. <td class="style4">
  229. </td>
  230. <td>
  231. </td>
  232. </tr>
  233. </table>
  235. </div>
  236. </form>
  237. </body>
  239. </html>
To use Checkbox Extender you can manually drag and drop the control under the individual checkbox, or you can add extender by going to individual checkbox.

add extender

It will open the Extender that you want to include for the respective control.

respective control

Than you have to provide “Key” for each Checkbox Extender, if you don’t provide key, the checkbox extender will not work. To specify the key you have to give the heading name for which checkbox is used like in our case - Favourite Color, Favourite Movies.

Key

Output chamber

Output
Thank you for reading.