获取复选框上所选复选框的总和值，在ajax响应后单击jquery

Question

I need to get the sum value of selected check boxes on check box click with jquery after ajax response.

$('.check:checked').each(function() {   });

The above jQuery function works if I call the check box when the page loading but I have to call this function after an AJAX response it's not working.

So I have tried with below one but no idea to get the sum of the selected check boxes value

$('body').on('click', '.check', function(){ }

jQuery function

<script>
    $(document).ready(function(){ 
        $('body').on('click', '.check', function(){
            var tot  = 5;
            $('.check:checked').each(function() {
                console.log($(this).val());                      
                tot += $(this).val();
            });
            console.log(tot);
        }); 
$('#payType').change(function(){
    var pType = $(this).val();
    var y = $('[name = "year"]').val();
    clearRuntimeFunctions();                        

    $('#payType').val(pType);
    if(pType != "dntSntReqst"){                     
        $('#ajax_img_lod').show();          

        $.ajax({            
            url: 'AJAX_Requst/getOtherPaymt.php',
            type: 'POST',
            data: {
                'pYear': y,
                'payType': pType,                   
            },
            success: function( data ){
                $('#ajax_img_lod').hide();                                      
                $('#ajax_response').html(data);


            }
        });
    }
});
    });
</script>

This an AJAX response page

<?php
    <table class="table table-message" style="margin: 10px 25px;max-width: 350px;">
        <tbody>
            <tr class="heading">                    
                <td class="cell-title"> Year </td>
                <td class="cell-title"> Month </td>
                <td class="cell-title"><div align="right"> Amount  </div></td> 
                <td class="cell-title"><div align="right"> Balance</div> </td> 
                <td class="" width="2%"><div align="right"></div></td>
            </tr>

            foreach($monthEnd_Arry as $m)
            {
                $sql_cls = mysql_query("SELECT book FROM cls_room_tb WHERE cls_brnch_id='$br_id' AND start_date <= '$m'");
                $noCls = mysql_num_rows($sql_cls);
                if ($noCls > 0) {
                    if ($noCls <= 4) {
                        $centFee = $noCls * 1000;   
                    }
                    else {
                        $centFee = 4 * 1000;                    
                        $centFee += ($noCls - 4) * 500;                     
                    }

                    $sql_paid = mysql_query("SELECT SUM(amount) FROM other_payments WHERE br_id='$br_id' AND pay_type='$payType' AND 
                    pYear = '$pYear' AND pMonth='". substr($m , 5, 2)."'");
                    $res_paid = mysql_fetch_row($sql_paid);
                    $paidAmount = $res_paid[0];
                    $amount =  $centFee  ;

                    echo '<tr class="unread">  
                        <td class="cell-title" >'.$pYear.'</td>
                        <td class="cell-title" >'.month_crt( substr($m , 5, 2)).' - '.$noCls.' </td>
                        <td class="cell-title" >
                                <div align="right"> '.numFormt($amount).'</div>
                        </td>
                        <td class="cell-title" ><div align="right">'.numFormt( $amount - $paidAmount ).'</div></td>
                        <td class="cell-title" >
                            <input type="checkbox" class="check" name="checkPay[]" value="'.numFormt( $amount - $paidAmount ).'" />
                        </td>
                    </tr>'; 
                }
            }
?>

Answer 1

Sum it up inside ajax success callback, e.g:

$.ajax({
    url: 'AJAX_Requst/getOtherPaymt.php',
    type: 'POST',
    data: {
        'pYear': y,
            'payType': pType,
    },
    success: function (data) {
        $('#ajax_img_lod').hide();
        $('#ajax_response').html(data);
        // find(':checked') for checked ones 
        // even none seems checked regarding your servser side script
        // so maybe use `.find('.check')` instead but that's not clear what you are expecting here???
        var sum = $('#ajax_response').find(':checked').map(function () {
            return +this.value
        }).get().reduce(function (a, b) {
            return a + b;
        });
        // do whatever you want with `sum`
        console.log(sum);
    }
});

Or maybe you want to call it on:

$(document).on('change', '.check', function () {
    var sum = $('.check').filter(':checked').map(function () {
        return +this.value
    }).get().reduce(function (a, b) {
        return a + b;
    }/* to start with default value != 0 as '5' in your posted code*/, 5);
    // do whatever you want with `sum`
    console.log(sum);
}

In fact, i'm not sure to understand what is your expected behaviour. How/when do you wish to sum up checked checkboxes values?!