Collect the values of checkboxes with jQuery - php

Question

I have a website to predict football results. Each soccer match has three checkboxes.
1-First team win(1checkbox)
2-Second team win(1checkbox)
3-Equal(1checkbox)
There are 10 soccer matches on one page. So, on a page, I have 30 checkboxes. The user can select all three checkboxes for each football match.
I need jQuery code to work like this website:
https://web.archive.org/web/20100529040418/http://www.bwin90.com/
if you select two or three checkboxes in soccer match, the numbers are exponentially rising.
My html and php codes:
<form method="POST">
<div class="form-group mt-4">
<div class="w-100 p-3">
<table class="table">
<thead class="thead-dark">
<tr>
<th class="text-center" scope="col"></th>
<th class="text-center" scope="col">team1</th>
<th class="text-center" scope="col">equal</th>
<th class="text-center" scope="col">team2</th>
<th class="text-center" scope="col"></th>
</tr>
</thead>
<tbody>
<form>
<?php
$get_teams1="SELECT * FROM teams WHERE show_match=1 ORDER BY team_id DESC";
$get_teams2 = mysqli_query($conn, $get_teams1);
while($get_teams3=mysqli_fetch_assoc($get_teams2))
{
echo'
<tr>
<td class="text-right"><input type="checkbox" class="qty1 form-check-input" value="20" id="exampleCheck1"></td><td class="text-center">'.$get_teams3["mizban"].'</td>
<td class="text-center"><input type="checkbox" class="qty1 form-check-input" id="exampleCheck1"></td>
<td class="text-center">'.$get_teams3["mihman"].'</td><td class="text-right"><input type="checkbox" class="qty1 form-check-input" id="exampleCheck1"></td>
</tr>
';
}
?>
<input type="text" class="total" value="" />
</form>
</tbody>
</table>
<button type="button" class="btn btn-dark mt-2 w-100" name="register3" />
<h5>ثبت فرم</h5>
</button>
</div>
</div>
</form>
My jquery codes:
<script>
$(document).ready(function(){
$(document).on("change", ".qty1", function() {
var sum = 0;
$(".qty1").each(function(){
sum += +$('.qty1').val();
});
$(".total").val(sum);
});
});
</script>
At the end, I want to display the cost amount instantly by selecting checkboxes.

Answer 1

you May try something like this
Html Code
<table class="table table-bordered" id="filltable">
<tr>
<td>demo <input type="checkbox" id="chk1" value="10" onchange="add(1,10)"/></td>
<td>demo1 <input type="checkbox" id="chk2" value="10" onchange="add(2,10)" /></td>
<td>demo2 <input type="checkbox" id="chk3" value="10" onchange="add(3,10)"/></td>
<td>demo3 <input type="checkbox" id="chk4" value="10" onchange="add(4,10)"/></td>
</tr>
</table>
and Jquery Code:
var sum = 0;
function add(id,value) {
if ($('#chk' + id).prop('checked') == true) {
sum= sum + value
}
else {
sum= sum - value
}
alert(sum);
}