How to Call JavaScript function when CheckBoxList is clicked (checked or unchecked) in ASP.NET

Category > ASP.NET || Published on : Thursday, September 14, 2017 || Views: 8568 || Call JavaScript function when CheckBoxList is clicked (checked or unchecked) ASP.NET


Introduction

Here Pawan Kumar will explain how to Call JavaScript function when CheckBoxList is clicked (checked or unchecked) in ASP.NET

Description

In previous post I have explained Mvc 4 Razor CRUD Operation using C# || ASP.NET MVC 4 application to Create/Insert,Read,Update,Delete and Search functionality using Razor view engine and Entity Framework, Top Popular Open Source E-Commerce ASP.Net Projects, Calculator in Winform DotNet using C Sharp, Swapping of two numbers without using third variable using dotnet with c sharp, How to do Client Side OnCheckChanged event for ASP.Net CheckBox using JavaScript, ASP.Net: Call JavaScript function when RadioButton is checked or unchecked, and many more articles.

Now I will explain How to How to Call JavaScript function when CheckBoxList is clicked (checked or unchecked) in ASP.NET

So follow the steps to learn How to Call JavaScript function when CheckBoxList is clicked (checked or unchecked) in ASP.NET
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:CheckBoxList ID="chkDays" runat="server">
        <asp:ListItem Text="Monday" Value="1"></asp:ListItem>
        <asp:ListItem Text="Tuesday" Value="2"></asp:ListItem>
        <asp:ListItem Text="Wednesday" Value="3"></asp:ListItem>
        <asp:ListItem Text="Thursday" Value="4"></asp:ListItem>
        <asp:ListItem Text="Friday" Value="5"></asp:ListItem>
         <asp:ListItem Text="Saturday" Value="5"></asp:ListItem>
    </asp:CheckBoxList>
    <script type="text/javascript">
        window.onload = function () {
            var chk = document.getElementById("<%=chkDays.ClientID %>");
            var checkboxes = chk.getElementsByTagName("INPUT");
            for (var i = 0; i < checkboxes.length; i++) {
                checkboxes[i].onchange = function () {
                    var message = "";
                    for (var i = 0; i < checkboxes.length; i++) {
                        if (checkboxes[i].checked) {
                            var label = checkboxes[i].parentNode.getElementsByTagName("LABEL")[0];
                            message += "Value: " + checkboxes[i].value +
                            " Text: " + label.innerHTML + "\n";
                        }
                    }
                    alert(message);
                };
            }
        };
    </script>
    </form>
</body>
</html>

 

Conclusion:

So, In this tutorial we have learned, How to Call JavaScript function when CheckBoxList is clicked (checked or unchecked) in ASP.NET