Before looking at the code, Read about – What is JumpStart?
The following code presents a Mandatory (Required) CheckBoxList with a Default Selection.
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { /* The purpose of adding onclick to individual items is that, if we add onclick to the * complete checkboxlist, then whenever there is a click on the checkboxlist the onclick * javscript function will be called twice (it is by design of the checkboxlist control). * So to avoid that behaviour we take individual items of checkboxlist and add onclick * attributes to it. * * The onclick function here is - call(this) i.e., the function takes the parameter of the * listitem that is clicked. */ foreach (ListItem li in CheckBoxList1.Items) { li.Attributes.Add("onclick", "call(this)"); } } </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> <script type="text/javascript"> // This is the Onclick Javascript function function call(event) { // Get the argument of the funtion var ListItem = event; // Get the checkboxlist anf the individual checkboxes of the parent control. var CheckBoxList = document.getElementById("<%=CheckBoxList1.ClientID%>"); var CheckBoxes = CheckBoxList.getElementsByTagName("input"); /* If the Clicked CheckBoxList item is 'None of the options', then first check * whether it is being checked or getting Un-checked (onclick of listitem) using * ListItem.checked. * * If it is being checked - then uncheck all remaining checkboxes. * If it is being Un-checked - without any other selection, then make it a mandatory field. * * All together, we are making the checkboxlist a mandatory field. */ if (ListItem.value == 'None of the options') { if (!ListItem.checked) { ListItem.checked = true; for (var i = 1; i < CheckBoxes.length; i++) { if (CheckBoxes[i].checked) { CheckBoxes[0].checked = false; } } } else { for (var k = 1; k < CheckBoxes.length; k++) { CheckBoxes[k].checked = false; } } } // In case of other items being checked, then un-check the 'None of the options' option. if (ListItem.value != 'None of the options') { CheckBoxes[0].checked = false; } // if not even one checkbox is checked. then check the 'none of the options' checkbox. var count = 0; for (var j = 0; j < CheckBoxes.length; j++) { if (CheckBoxes[j].checked) { count = count + 1; } } if (count == 0) { CheckBoxes[0].checked = true; } } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:CheckBoxList ID="CheckBoxList1" runat="server" > <asp:ListItem Text="None of the options" Selected="true"></asp:ListItem> <asp:ListItem Text="Lamborgini" ></asp:ListItem> <asp:ListItem Text="Mercedes" ></asp:ListItem> <asp:ListItem Text="Bugatti" ></asp:ListItem> <asp:ListItem Text="Ferrari" ></asp:ListItem> <asp:ListItem Text="Honda" ></asp:ListItem> </asp:CheckBoxList> </div> </form> </body> </html>
Demo –
