與jQuery自動輸入總和

Question

我正在計算更多的字段，我想獲得沒有任何jQuery事件的#price +＃price2自動求和。 我一直在尋找各種教程，但我只是設法得到點擊的總和。

我希望她沒有點擊，她怎麼能做到這一點？

function calcscore() { 
 
    score = 0; 
 
    $(".calc:checked,#TextBox4").each(function() { 
 
    score += Number($(this).val()); 
 
    }); 
 

 
    $("#sum").val(score) 
 
    $("#price").text(score.toFixed(2)); 
 
} 
 

 
function add() { 
 
    var sum = 0; 
 
    $(".test").each(function() { 
 
    sum += +this.value; 
 
    }); 
 
    return sum; // an add function shouldn't really "alert" 
 
} 
 

 

 
$(document).on("change", ".test", function() { 
 
    var sum = 0; 
 
    $(".test").each(function() { 
 
    sum += +$(this).val(); 
 
    }); 
 
    $("#price3").val(sum); 
 
}); 
 

 

 
$(document).ready(function() { 
 

 
    $(".calc").change(function() { 
 
    calcscore(); 
 
    }); 
 

 
    $('#add').click(function() { 
 
    $("#price3").text(add().toFixed(2)); 
 
    }); 
 

 
    $("#TextBox1").datepicker({ 
 
    minDate: 0, 
 
    maxDate: '+1Y+6M', 
 
    altField: "#arrivo", 
 
    altFormat: "DD, d MM, yy", 
 
    onSelect: function(dateStr) { 
 
     var min = $(this).datepicker('getDate'); // Get selected date 
 
     $("#TextBox2").datepicker('option', 'minDate', min || '0'); // Set other min, default to today 
 
    } 
 
    }); 
 

 
    $("#TextBox2").datepicker({ 
 
    minDate: '0', 
 
    maxDate: '+1Y+6M', 
 
    altField: "#partenza", 
 
    altFormat: "DD, d MM, yy", 
 
    onSelect: function(dateStr) { 
 
     var max = $(this).datepicker('getDate'); // Get selected date 
 
     $('#datepicker').datepicker('option', 'maxDate', max || '+1Y+6M'); // Set other max, default to + 18 months 
 
     var start = $("#TextBox1").datepicker("getDate"); 
 
     var end = $("#TextBox2").datepicker("getDate"); 
 
     var timeDiff = Math.abs((end - start)); 
 
     var days = Math.ceil(timeDiff/(1000 * 3600 * 24)); 
 

 
     $("#TextBox3").val(days); 
 

 
     if (days == 1) { 
 
     parseInt($("#TextBox4").val('10'), 10); 
 
     parseInt($("#price2").text('10'), 10); 
 

 
     } else if (days == 0) { 
 
     parseInt($("#TextBox4").val('10'), 10); 
 
     parseInt($("#price2").text('10'), 10); 
 
     $("#TextBox3").val('1'); 
 
     } else if (days == 2) { 
 
     parseInt($("#TextBox4").val('12'), 10); 
 
     parseInt($("#price2").text('12'), 10); 
 
     } else if (days == 3) { 
 
     parseInt($("#TextBox4").val('14'), 10); 
 
     parseInt($("#price2").text('14'), 10); 
 
     } else if (days == 4) { 
 
     parseInt($("#TextBox4").val('16'), 10); 
 
     parseInt($("#price2").text('16'), 10); 
 
     } else if (days >= 5) { 
 
     var y = (days) * 4; 
 
     parseInt($("#TextBox4").val(y), 10); 
 
     parseInt($("#price2").text(y), 10); 
 
     } 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 
<form> 
 
    <div id="tipo-veicolo"> 
 
    <input class="calc" type="radio" name="type" value="5"> Macchina 
 
    <input class="calc" type="radio" name="type" value="2"> Scooter 
 
    <input class="calc" type="radio" name="type" value="10"> Camion 
 
    </div> 
 
    <div class="variant"> 
 
    <label>Cambio olio</label> 
 
    <input class="calc" type="checkbox" name="check1" id="check1" value="10" /> 
 
    <label>Cambio gomme</label> 
 
    <input class="calc" type="checkbox" name="check1" id="check2" value="2" /> 
 
    <label>Car valet</label> 
 
    <input class="calc" type="checkbox" name="check1" id="check3" value="12" /> 
 
    </div> 
 
    <div id="selezione-data"> 
 
    <div class="check-in"> 
 
     <label>Check-In</label> 
 
     <input type="text" id="TextBox1" /> 
 
    </div> 
 
    <div class="check-out"> 
 
     <label>Check-Out</label> 
 
     <input type="text" id="TextBox2" /> 
 
    </div> 
 
    <div class="numero-giorni"> 
 
     <label>Numero Giorni</label> 
 
     <input type="text" id="TextBox3" value="0" /> 
 
     <label>Arrivo</label> 
 
     <input type="text" id="arrivo" size="30"> 
 
     <label>Partenza</label> 
 
     <input type="text" id="partenza" size="30"> 
 
    </div> 
 
    </div> 
 
    <div class="totale"> 
 
    <input class="test num1" name="totale" id="TextBox4" value="0" /> 
 
    <input class="test num2" type="text" name="sum" id="sum" value="0"> Sum: <input type="text" class="sum" readonly="readonly"> 
 
    </div> 
 

 
</form> 
 

 
<p>Total: PHP <span id="price">0</span></p> 
 

 
<p>Total: PHP <span id="price2">0</span></p> 
 

 
<p>Total: PHP <span id="price3">0</span></p> 
 

 
<input id="add" type="button" value="add" />

謝謝你，美好的一天

Answer 1

林不知道如果我理解正確，但你不能在不使用任何事件做到這一點。

您可以通過在jQuery中使用例如輸入事件來實現自動聚合。

下面是例子是：

$('.num1, .num2').on('input', function() { 
    $('.sum').val(parseInt($('.num1').val()) + parseInt($('.num2').val())); 
}); 

Here is jfiddle.

Answer 2

試試這個來實現自己的目標，把它document.ready活動結束

$(document).ready(function() { 
.. 
.. 
.. 
    $("input").change(function() { // place it at the bottom of other events, this will listen for all inputs 
    $("#price3").text(add().toFixed(2)); // after input changes it will calculate 
    }); 
}); 

demo

希望幫助，