JSFiddle - React, Tailwind, and code Playground

by praveen_jegan

HTML

<input type="checkbox" class="chkSelectAllTimeLogs" value="1" />
<br/>
<br/>
<br/>
<br/>
<input type="checkbox" class="timeLogItem" value="1" />
<input type="checkbox" class="timeLogItem" value="2" />
<input type="checkbox" class="timeLogItem" value="3" />
<div id="divTotalAmount"></div>

JavaScript

var total = 0; 
$(".chkSelectAllTimeLogs").click(function () {
     if ($(this).is(':checked')) {
         $(".timeLogItem").prop("checked", true);
         ehRunningTotalForTimeLogPaymentEntry();
     } else {
         $(".timeLogItem").prop("checked", false);
     }
 });

 function ehRunningTotalForTimeLogPaymentEntry() {
     var ar = [];
     $('.timeLogItem:checked').each(function () {
         ar.push(parseInt($(this).val()));
     });
     
     for (var i = 0; i < ar.length; i++) {
         total += ar[i];
     }
     console.log(total);
     $('#divTotalAmount').text(total);
 };

jQuery(".timeLogItem").click( function() {
   
    var amount = parseInt($(this).val());
    if ($(this).is(":checked"))
    { total += amount; }
    else
    {
        total -= amount;
    }
       $('#divTotalAmount').text(total);
  });