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)");
        }
    }
</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 –

You may also like...