ASP.Net DataList: Calculate item Total when checked using JavaScript

Hi smile,

Refer below example.

HTML

<asp:DataList ID="dl1" runat="server" RepeatColumns="5" CellSpacing="0" RepeatLayout="Table">
    <ItemTemplate>
        <table>
            <tr>
                <td></td>
                <td><img alt="Books" height="50" width="50" src="/UserImage.png" /></td>
            </tr>
            <tr>
                <td></td>
                <td colspan="2"><asp:CheckBox ID="chkRow" runat="server" Font-Bold="true" Text='<%# Eval("ItemName")%>' /></td>
            </tr>
            <tr>
                <td></td>
                <td colspan="1">Price:<span id="lblPrice"><%# Eval("Price")%></span></td>
            </tr>
        </table>
    </ItemTemplate>
</asp:DataList>
<hr />
<table>
    <tr>
        <td>Vat</td>
        <td><asp:TextBox runat="server" ID="txtVat" Text="15" /></td>
    </tr>
    <tr>
        <td>Discount</td>
        <td><asp:TextBox runat="server" ID="txtDiscount" Text="10" /></td>
    </tr>
    <tr>
        <td>Total</td>
        <td><asp:Label ID="lblGrandTotal" runat="server" /></td>
    </tr>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('[id*=dl1] [id*=chkRow]').on("click", function () {
            CalculateGrandTotal();
        });

        $('[id*=txtVat]').on("blur", function () {
            CalculateGrandTotal();
        });

        $('[id*=txtDiscount]').on("blur", function () {
            CalculateGrandTotal();
        });
    });

    function CalculateGrandTotal() {
        var totalPrice = 0;
        $('[id*=dl1] [id*=chkRow]').each(function () {
            var checkbox = $(this).closest('table').find('[id*=chkRow]');
            if ($(checkbox).is(':checked')) {
                totalPrice += parseFloat($(this).closest('table').find('#lblPrice').html());
            }
        });
        $('[id*=lblGrandTotal]').html(Calculate(totalPrice, $('[id*=txtVat]').val(), $('[id*=txtDiscount]').val()).toFixed(2));
    }

    function Calculate(total, vat, discount) {
        if (total == '') { total = '0'; }
        if (vat == '') { vat = '0'; }
        if (discount == '') { discount = '0'; }
        var vatAmount = total * (parseFloat(vat) / 100);
        var discountAmount = (total + vatAmount) * (parseFloat(discount) / 100);
        return (total + vatAmount - discountAmount);
    }
</script>

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { 
            new DataColumn("Id"), 
            new DataColumn("ItemName"),
            new DataColumn("Price") });
        dt.Rows.Add(1, "Hat", "90");
        dt.Rows.Add(2, "Ball", "50");
        dt.Rows.Add(3, "Belt", "60");
        dl1.DataSource = dt;
        dl1.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    If Not Me.IsPostBack Then
        Dim dt As DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn(2) {
            New DataColumn("Id"), 
            New DataColumn("ItemName"), 
            New DataColumn("Price")})
        dt.Rows.Add(1, "Hat", "90")
        dt.Rows.Add(2, "Ball", "50")
        dt.Rows.Add(3, "Belt", "60")
        dl1.DataSource = dt
        dl1.DataBind()
    End If
End Sub

Screenshot