单击复选框时如何加载一个汇总值的表（来自数据库）。 在下拉菜单中的onchange函数中

Question

我正在尝试制作费用帐单。 当从下拉列表中选择一个学生姓名时，我想加载一个表，其中包含待处理的费用（来自数据库）。 我知道很简单，但是在表格中我想在单击复选框时显示费用，我想总结费用金额。

IAM成功加载表并对其值求和。 但是当我合并代码时。 求和是行不通的

index.php

<select id="housename" onchange="show_fee_table(this.value);">                                       
<option value="" >Select</option>  
<option value="1" >name1</option> 
<option value="2" >name2</option> 
<option value="3" >name3</option> 
<option value="4" >name4</option>                                                                                
</select>

<div id=txtHint></div>


<script>
function show_fee_table(str) {
var xhttp;  
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
  document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xhttp.open("GET", "get-fee-details.php?q="+str, true);
xhttp.send();
}
</script>  

get-fee-details.php

//actully this datas suppose to load from datatbase.


<form name=form1 >
<table class='table table-striped' >
<tr ><th >FEES name</th><th >status</th></tr>
<tr ><td ><input type=checkbox name=ckb value=100 onclick='chkcontrol(0)';> fee = 100 </td><td>Not Paid</td></tr>
<tr><td ><input type=checkbox name=ckb value=200 onclick='chkcontrol(1)';> fee = 200 </td><td>Not Paid</td></tr>
<tr  ><td ><input type=checkbox name=ckb value=300 onclick='chkcontrol(2)';> fee = 300 </td><td>Not Paid</td></tr>
<tr ><td ><input type=checkbox name=ckb value=400 onclick='chkcontrol(3)';> fee = 400 </td><td>Not Paid</td></tr>

</table></form>

<br>

<div id=msg></div>


<script     src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">        
</script>

<script type="text/javascript"> 
function chkcontrol(j) {
var sum=0;
for(var i=0; i < document.form1.ckb.length; i++){

if(document.form1.ckb[i].checked){
sum = sum + parseInt(document.form1.ckb[i].value);
}
document.getElementById("msg").innerHTML="Sum :"+ sum;
document.getElementById("msg").innerHTML="Sum :"+ sum;
}}
</script>

处理付款时，我还需要获取复选框的ID，以便我可以将未付款状态更改为已付款

任何其他方法也都受到欢迎。

Answer 1

<script     src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">        
</script>
<form name=form1 >
<table class='table table-striped' >
<tr ><th >FEES name</th><th >status</th></tr>
<tr ><td ><input type=checkbox name=ckb class="due-fee" value=100;> fee = 100 </td><td>Not Paid</td></tr>
<tr><td ><input type=checkbox name=ckb class="due-fee" value=200 ;> fee = 200 </td><td>Not Paid</td></tr>
<tr  ><td ><input type=checkbox name=ckb class="due-fee" value=300;> fee = 300 </td><td>Not Paid</td></tr>
<tr ><td ><input type=checkbox name=ckb class="due-fee" value=400 ;> fee = 400 </td><td>Not Paid</td></tr>

</table></form>

<br>

<div id=msg></div>

<script     src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">   

</script>

和你的js。

<script type="text/javascript"> 
var sum = 0;
$('body').on('click', '.due-fee', function() {
   var status = '';
  if ($(this).is(':checked')) {
      sum += parseInt($(this).val());
      status = 'Paid';
   } else {
      sum -= parseInt($(this).val());
      status = 'Not paid';
   }
   $(this).parents('tr').eq(0).find('td:eq(1)').text(status);
   $('#msg').text(sum);
});
</script>