'How to insert price based on checkbox checked

I have a form where I calculate the price based on the checkboxes checked. But I am having trouble as its not updating the final price correctly. I did some jQuery coding but it's not functioning properly. How can I debug the code and fix it?

//Price Calculator
$(document).ready(function(){
  
  function Calculator(){
    let totalAmount = 0;
    if($('input[datasource=service_0]').is(':checked')){  // First Checkbox targeted using datasource attribute
      totalAmount = 395;
      return totalAmount;
    }else if($('input[datasource=service_1]').is(':checked')){   // First Checkbox targeted using datasource attribute
      totalAmount = 392;
      return totalAmount;
    }else if ($("input[datasource=service_0]:checked,input[datasource=service_1]:checked").length == 2) {
      totalAmount = 397;
      return totalAmount;
    }
  }
  //Insert Updated Amount to Budget field
  $("input[type=checkbox]").on("click", function(){
    if ($("input[datasource=service_0]:checked,input[datasource=service_1]:checked").length == 2){
      $("input[name=wpcf-book-amount]").val(Calculator());
    } else{
      $("input[name=wpcf-book-amount]").val(Calculator());
    }
  })
  
})

<div class="extra-services">
    <ul>
        <li>
            <input type="checkbox" name="wpcf-additional-services[]" data-value="5" id="wpcf-fields-checkboxes-option-d41b805f6cbf1d0ab6ee12b8dda8b47d-1" datasource="service_0">
            <label for="wpcf-additional-services">Cot (EUR 5)</label>
        </li>
        <li>
            <input type="checkbox" name="wpcf-additional-services[]" data-value="2" id="wpcf-fields-checkboxes-option-d41b805f6cbf1d0ab6ee12b8dda8b47d-1" datasource="service_1">
            <label for="wpcf-additional-services">BABY CHAIR (EUR 2)</label>
        </li>
    </ul>
    <input type="text" name="wpcf-booking-amount" id="booking_field" placeholder="Booking Amount (System Generated)" readonly>
</div>

Form containing the fields responsible to calculate the booking amount

javascript jquery

Solution 1:^[1]

<html>
    <head></head>
    <body>
        <input type="checkbox"  id="1st" onclick="ge()"  value=500>
  <label for="1st"> I have a bike</label><br>
  <input type="checkbox"  id="2nd" onclick ="ye()" value=200>
  <label for="2nd"> I have a car</label>

<input type="number" id="here" value="0">
        <script>
        var amt = 0;
        var st = document.getElementById("1st");
        var nd = document.getElementById("2nd");
        var num = document.getElementById("here");
        function ge() {
            
            
            if(st.checked == true ){
                var g =  parseInt(st.value);
            amt = amt + g;
            num.value = amt ;
            } 
            else{
                
                amt = amt - parseInt(st.value);
                num.value = amt;
                
            }
        }
        function ye() {
            if(nd.checked == true){
                var g =  parseInt(nd.value);
            amt = amt + g;
            num.value = amt ;
            }
            else{
                amt = amt - parseInt(nd.value);
                num.value = amt;
            }
        }
        </script>
    </body>
</html>

Here you go if it's only for two checkbox this will work, for live demo click here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	whynotcode

'How to insert price based on checkbox checked

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]