使用javascript php复选框为总计添加税

I have a transaction form that could use tax or no tax if the transaction use tax than the user click the checkbox and it will give a value to taxes textbox (besides the checkbox)

And calculate/sum subtotal + taxes = grandtotal

the tax is fix 10% of subtotal

here is my code

<?php
$con = mysqli_connect('localhost', 'root', '', 'a.karat');
if(isset($_POST['product_id']))
{
    $prno=$_POST['prno'];
    $i=1;
    $sql = mysqli_query($con,"select * from detail_pr where prNo='$prno'");
while ($r = mysqli_fetch_array($sql)) {

    echo 

    '<tr>
<td><input type="checkbox" name="check[]" id="check'.$i.'" value="'.$i.'"></td>
<td><label for="productCode"></label>
  <input type="text" name="productCode'.$i.'" id="productCode'.$i.'" readonly value="'.$r["productCode"].'" size="12" ></td>
<td><label for="productName"></label>
  <input type="text" name="productName'.$i.'" id="productName'.$i.'" readonly value="'.$r["productName"].'"size="35" ></td>
<td><label for="qty"></label>
  <input type="number" onkeyup="calc(this);" name="qty'.$i.'" id="qty'.$i.'" readonly value="'.$r["qty"].'" size="10" ></td>
<td><input type="number" onkeyup="calc(this);" name="price'.$i.'" id="price'.$i.'" size="10" min="1" max="99" onchange="calc(this);" ></td>
<td><input type="number" onkeyup="calc(this);" name="discount'.$i.'" id="discount'.$i.'" size="10" min="0" max="99" onchange="calc(this);"></td>
<td><input type="number" name="total'.$i.'" id="total'.$i.'" size="15" min="1" max="99" onchange="calc(this);"  ></td>
  </tr>';
  $i++;
      }
}
?>

<form name="form1" id="form1 >
<table width="400" border="0" align="right">
<tr>
    <th scope="row">Sub Total</th>
     <td>:</td>
    <td><input name="subtotal" id="subtotal" type="text" onFocus="startCalc();" onBlur="stopCalc();"></td>
  </tr>
  <tr>
    <th scope="row">tax 10% <input name="tax" id="tax" type="checkbox" value="10" ></th>
     <td>:</td>
    <td><input name="taxes" id="tax1" type="taxes"></td>
  </tr>
  <tr>
    <th scope="row">Grand Total</th>
     <td>:</td>
    <td><input name="grandtotal" id="grandtotal" type="text"></td>
  </tr>
</table>
 </form>

<script>
function calc(id) {
  var row = id.parentNode.parentNode;
  var quant = row.cells[3].getElementsByTagName('input')[0].value;
  var price = row.cells[4].getElementsByTagName('input')[0].value;
  var disc = row.cells[5].getElementsByTagName('input')[0].value;
  if (disc == null || disc == '') {
    res = parseFloat(quant) * parseFloat(price);
  } else {
    var res = (parseFloat(quant) * parseFloat(price)) - (parseFloat(quant) *    parseFloat(price) * (parseFloat(disc) / 100));
  }
  row.cells[6].getElementsByTagName('input')[0].value = res;
}


   </script>

   <script>
    document.querySelector('#form1').addEventListener('change', function( event ) {
        if (event.target.id && event.target.id !== 'subtotal') {


            var allTotals = document.querySelectorAll('input[name^="total"]'),
                allTotalSum = 0;
            Array.prototype.forEach.call(allTotals, function( element ) {

                if (element.value) { allTotalSum += parseFloat(element.value); }
            });

            document.querySelector('#subtotal').value = allTotalSum;
        }
    });

how to calculate subtotal + taxes = grandtotal?

thanks for the respond

i finally found my answer

<script>
var tax    = document.getElementsByName('tax')[0];
var taxes = document.getElementsByName('taxes')[0];
var subtotal     = document.getElementsByName('subtotal')[0];
var grandtotal    = document.getElementsByName('grandtotal')[0];

function updateInput() {
  taxes.value = subtotal.value *  (tax.value / 100);
  var sum = (parseInt(subtotal.value) + parseInt(taxes.value)) ;
  grandtotal.value = sum.toFixed(0);
}

subtotal.addEventListener('change', updateInput);
tax.addEventListener('change', updateInput);
taxes.addEventListener('change', updateInput);
taxes.addEventListener('keyup', updateInput);


</script>