JumpStart # 6 – Accessing CheckBoxList Control in JavaScript and making a Mandatory Selection Enabled


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)");

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <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;
    <form id="form1" runat="server">
        <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>

Demo –

You may also like...