Question

我想在包含多个元素的表单中进行实时计算，并且应立即显示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()中计算并显示在

中

<span class="totaalprijs"><span>

表格下方：

 <form class="bestelformulier" method="post" action=''>
    <table style="width:300px">
        <tr>
          <td>Broodje Gezond</td>
          <td>&euro; <?php echo $prijzen['broodjegezond']; ?></td>      
          <td><input name="broodjegezond" id="broodjegezond" type="text" placeholder="aantal" maxlength="3" size="2" /></td>
          <td>&euro; <span class="totaalbroodjegezond"></span></td>
        </tr>
        <tr>
          <td>Broodje Zalm</td>
          <td>&euro; <?php echo $prijzen['broodjezalm']; ?></td>        
          <td><input name="broodjezalm" id="broodjezalm" type="text" placeholder="aantal" maxlength="3" size="2" /></td>
          <td>&euro; <span class="totaalbroodjezalm"></span></td>
        </tr>
        <tr>
          <td>Broodje Tonijn</td>
          <td>&euro; <?php echo $prijzen['broodjetonijn']; ?></td>
          <td><input name="broodjetonijn" id="broodjetonijn" type="text" placeholder="aantal" maxlength="3" size="2" /></td>
          <td>&euro; <span class="totaalbroodjetonijn"></span></td>
        </tr>

    </table>
    checkbox value 10
    <input class="calculate" type="checkbox" value="10" />
    <br />
    Checkbox value 15
    <input class="calculate" type="checkbox" value="15" />
    <br />
    Checkbox value 20
    <input  class="calculate" type="checkbox" value="20" />
    <br />
    Checkbox value 25
    <input class="calculate" type="checkbox" value="25" />
    <br />

    <br /><br />

    Radio value 20
    <input class="calculate" type="radio" name="calculate-radio" value="20" />
    <br />
    Radio value 25
    <input class="calculate" type="radio" name="calculate-radio" value="25" />
    <br />
    Radio value 30
    <input class="calculate" type="radio" name="calculate-radio" value="30" />


    <br /><br />
    <select name="selectbox"  id="selectbox">
        <option value="Select One">Select One</option>
        <option value="10">Price 10</option>
        <option value="15">Price 15</option>
        <option value="20">Price 20</option>
    </select>

    <br /><br />
    <span>Totaalprijs: &euro;</span>
    <span class="totaalprijs"></span>


</form>

Answer 1

基本上你需要一个计算所有字段的函数。这使得组合功能变得更容易一些。然后根据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部分的一些小改动：

<!-- for text fields you can use a data attribute to store your php values -->
<input type="text" data-price="2.5" />

<!-- the select's first option value should be 0 -->
<option value="0">Select One</option>

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

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;）

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

1 个答案: