Tengo un formulario donde calculo el precio en función de las casillas marcadas. Pero tengo problemas porque no actualiza correctamente el precio final. Hice un poco de codificación jQuery pero no funciona correctamente. ¿Cómo puedo depurar el código y arreglarlo?
//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>Formulario que contiene los campos encargados de calcular el importe de la reserva
<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>Aquí tiene, si es solo para dos casillas de verificación, esto funcionará, para una demostración en vivo, haga clic aquí