如何实时计算输入，复选框，广播和选择框中的值

我想在具有多个元素的表单中进行实时计算，并且应立即显示totalprice 。 这是我到目前为止：

  $(document).ready(function(){ //function to calculate total var calculateTotal = function(){ var total = (parseFloat($('.totaalbroodjegezond').text()) || 0.0 ) + (parseFloat($('.totaalbroodjezalm').text()) || 0.0 ) + (parseFloat($('.totaalbroodjetonijn').text()) || 0.0 ); $('.totaalprijs').text(total); }; // function for the checkboxes and radios $(".calculate").click(function(event) { var total = 0; $(".calculate:checked").each(function() { total += parseInt($(this).val()); }); if (total == 0) { $('.totaalprijs').text(''); } else { $('.totaalprijs').text(total); } }); // multiply price with values of input field $('#broodjegezond').keyup(function(){ $('.totaalbroodjegezond').text($('#broodjegezond').val() * 2.5); calculateTotal(); }); $('#broodjezalm').keyup(function(){ $('.totaalbroodjezalm').text($('#broodjezalm').val() * 3.5); calculateTotal(); }); $('#broodjetonijn').keyup(function(){ $('.totaalbroodjetonijn').text($('#broodjetonijn').val() * 4.5); calculateTotal(); }); }); 

正常的输入字段工作正常。 Checkboxes和RadioButtons也可以作为独立工作，但我不知道如何将它们集成到calculateTotal()我还需要一个selectbox函数，并将它也集成在calculateTotal() 。 有人可以帮我解决这些问题吗？ 所以我想要实现的目标：所有表单元素都应该在calculateTotal()中calculateTotal()并显示在

表格下方：

  
 
 
 
Broodje Gezond
 
€ 
 
 
€ 
 
 
 
Broodje Zalm
 
€ 
 
 
€ 
 
 
 
Broodje Tonijn
 
€ 
 
 
€ 
 
 
 checkbox value 10  
 Checkbox value 15  
 Checkbox value 20  
 Checkbox value 25  
 

 Radio value 20  
 Radio value 25  
 Radio value 30  

  Select One Price 10 Price 15 Price 20  

 Totaalprijs: €   

Answer 1

基本上你需要一个计算所有字段的函数。 这使得组合function变得更容易一些。 然后根据Barmar的建议，您可以使用change事件（或与keyup结合使用）并将该函数传递给此事件。

该函数通常遍历每个元素，检查它的类型并相应地切换计算。

 $.each(elements, function () { var field = $(this), newVal; // switch type switch (field.prop('type')) { case 'select-one': newVal = field.find(':selected').val() || 0; break; case 'text': newVal = parseFloat(field.val() || 0) * field.data('price'); field.closest('td').next().find('span').text(newVal); break; case 'radio': newVal = this.checked ? field.val() : 0; break; case 'checkbox': newVal = this.checked ? field.val() : 0; break; } newVal = parseFloat(newVal); total += newVal; }); 

循环遍历每个字段并默认使用0值可帮助您快速计算摘要。 例如，它可以将每个值分别存储在一个数组中，但是在减法的情况下，你必须比较它来自哪个字段，这会使它更加麻烦。

我的建议是遍历每个字段，并采取这一点开销。

HTML部分的一些小变化：

    Select One 

另外，限制文本字段的用户输入以仅允许数字：

 elements.filter('[data-price]').on('keypress', function (ev) { var key = ev.keyCode || ev.which; if (key > 31 && (key < 48 || key > 57)) { ev.preventDefault(); } }); 

DEMO

Smakelijk;）