Şöyle bir örnek yaptım hocam ama ajaxa gerek yok direk js ile yapılabilir bu işlem.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css">
<title>Ajax Veri Toplama</title>
</head>
<body>
<div class="container mt-5">
<div class="row">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Besinin Adı</th>
<th>Kalori</th>
<th>Protein</th>
</tr>
</thead>
<tbody>
<form action="" method="post">
<tr>
<td><input type="checkbox" name="besin[]" value="Süt" data-kalori="140" data-protein="30"></td>
<td>Süt</td>
<td>140</td>
<td>30</td>
</tr>
<tr>
<td><input type="checkbox" name="besin[]" value="Peynir" data-kalori="210" data-protein="40"></td>
<td>Peynir</td>
<td>210</td>
<td>40</td>
</tr>
<tr>
<td><input type="checkbox" name="besin[]" value="Tavuk" data-kalori="300" data-protein="50"></td>
<td>Tavuk</td>
<td>300</td>
<td>50</td>
</tr>
<tfoot>
<tr>
<td colspan="2">TOPLAM</td>
<td id="kalori">0</td>
<td id="protein">0</td>
</tr>
</tfoot>
</form>
</tbody>
</table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(function(){
var kalori = 0;
var protein = 0;
$("input").on('change', function(event) {
if($(this).is(":checked")) {
kalori += $(this).data("kalori");
protein += $(this).data("protein");
}else {
kalori -= $(this).data("kalori");
protein -= $(this).data("protein");
}
$("#kalori").html(kalori);
$("#protein").html(protein);
});
});
</script>
</body>
</html>