onchecked Multiple checkbox elements adding / deducting to total amount in plain javascript

This is a very simple example of how to deal when you have MULTIPLE CHECKBOX with an AMOUNT to be ADDED to the GRAND TOTAL. Also to be displayed on right table rows

There is a CATCH --> users might CHECK & UN-CHECK in such case there is a need to ADD & SUBSTRACT functionality as well as updating TABLE on-the-right with description.

HTML Code

<style type="text/css"> #rfare { width: 100%; } #rfare td { width: 50%; padding: 6px; border-bottom: #000 1px dashed; } #ytotal { border-top: red 1px solid !important; border-bottom: red 1px double !important; } </style> <div id="ldiv"> <label>Base Fare : </label> <input type="text" name="ifare" id="ifare" value="102.5"><br> <label>Tips : </label> <input type="text" name="tips" id="tips" value="20.25"><br> <h3>Additional Charges for Special Rides</h3> <input type="checkbox" name="ostation" id="ostation" value="200" onclick='handleChange(this);' data-chk="Out Station Ride Fees"> Out of State Pickup & Drop-Off Fees - $200+<br> <input type="checkbox" name="sevent" id="sevent" value="50" onclick='handleChange(this);' data-chk="Sporting Event Pickup / Drop-Off Fee" > Sports Stadium Pickup / Drop-Off - $50 Fees<br> <input type="checkbox" data-chk="Wedding Party Ride Fee" name="wevent" id="wevent" value="50" onclick='handleChange(this);' > Wedding Party Pickup or Drop-Off Fees - $50<br> <input type="checkbox" name="ometro" id="ometro" data-chk="Out of DFW Metroplex Pickup / Drop-Off Fee" value="40" onclick='handleChange(this);' > Out of DFW Metroplex Pickup / Drop-Off Fees - $40<br><br> </div> <div id="ldiv"> <table id="rfare"> <tr><td colspan="2"></td></tr> <tr id="tkt" style="font-size: 18px; font-weight: bold;"> <td>Type of Fleet</td> <td align="right"><?php echo strtoupper($booknow["cftype"]); ?></td> </tr> <tr id="tkt" style="font-size: 18px; font-weight: bold;"> <td>Fare</td> <td align="right">$ <?php echo number_format($booknow["ifare"],2); ?></td> </tr> <tr id="ytips"></tr> <tr id="yostation"></tr> <tr id="ysevent"></tr> <tr id="ywevent"></tr> <tr id="yometro"></tr> <tr id="ytotal"></tr> <tr> <td>Approx Distance</td> <td align="right"><?php echo $booknow["imiles"]; ?> Miles</td> </tr> <tr></tr> </table> </div>

JAVASCRIPT - CODE

let ifare = document.getElementById("ifare").value; let gtips = document.getElementById("tips").value; let tot =(+ifare + +gtips); let ostn; let lbl; document.getElementById("ytips").innerHTML = '<td style="font-size: 16px; font-weight: bold;">Driver Gratuity</td><td align="right" style="font-size: 16px; font-weight: bold;">$ ' + gtips + '</td>'; function handleChange(chkbox){ if(chkbox.checked == true){ ostn = chkbox.value; tot += +ostn; //alert('this value $' + tot); lbl = chkbox.getAttribute('data-chk'); qname = 'y' + chkbox.name; document.getElementById(qname).innerHTML = '<td style="font-size: 16px; font-weight: bold;">' + lbl + '</td><td align="right" style="font-size: 16px; font-weight: bold;">$ ' + ostn + '</td>'; document.getElementById('ytotal').innerHTML = '<td style="font-size: 16px; font-weight: bold;">Total Fare</td><td align="right" style="font-size: 16px; font-weight: bold;">$ ' + tot + '</td>'; //alert(lbl + ' : ' + qname + ' ===== $' + ostn); }else{ //document.getElementById("submit").setAttribute("disabled", "disabled"); // ostn = 0; ostn = chkbox.value; qname = 'y' + chkbox.name; tot += -ostn; //alert('this value $' + tot); document.getElementById(qname).innerHTML = ''; document.getElementById('ytotal').innerHTML = '<td style="font-size: 16px; font-weight: bold;">Total Fare</td><td align="right" style="font-size: 16px; font-weight: bold;">$ ' + tot + '</td>'; } } document.getElementById('ytotal').innerHTML = '<td style="font-size: 16px; font-weight: bold;">Total Fare</td><td align="right" style="font-size: 16px; font-weight: bold;">$ ' + tot + '</td>';