-1

我正在尝试在 jQuery 上进行简单的计算，它将根据输入字段中输入和检查的值计算总价。这是我的简化代码，但它不起作用。我犯错的地方。谢谢。这是JSFiddle。

$(document).ready(function(){
    var total = 0;
    var totalextras = 0;
    var rmnumber = 0;
    var bmnumber = 0;

    $('.extras').click(function(){        
        $('.extras:checked').each(function(){
            totalextras += parseInt($(this).val());            
        });
    });

    $('#rm').on('change',function(){
        rmnumber = parseInt($(this).val());
    });

    $('#rm').on('change',function(){
        bmnumber = parseInt($(this).val());
    });

    total = totalextras + rmnumber + bmnumber;
    $('#total').text(total);
});
<input type='number' id='rm'>
<input type='number' id='bm'><br>
<div class='extra'>
    <label>first</label>
    <input class='extras' type='checkbox' value='100'>
    <label>second</label>
    <input class='extras' type='checkbox'value='500'>
    <label>therd</label>
    <input class='extras' type='checkbox'value='1000'>
    <label>forth</label>
    <input class='extras' type='checkbox'value='1200'>
</div>
<p id='total'>0</p>

4

2 回答 2

1

每次输入更改时，您都需要更新总数。您的代码也可以缩减到几行。

$(document).ready(function () {
  var total = 0;

  $('input').on('change', function () {
    total = 0; // Reset the total every time an input changes

    // Check the value of each checkbox
    $('input[type="checkbox"]:checked').each(function () {
      total += parseInt($(this).val());
    });

    // Check the value of each number field
    $('input[type="number"]').each(function () {
      total += $(this).val() ? parseInt($(this).val()) : 0;
    });

    $('#total').text(total);
  });
});

http://jsfiddle.net/huwmju01/4/

编辑：更新以反映 Duncan Tidd 关于重置数字字段值以避免 NaN 输出的建议。还通过迭代每个数字字段类型来缩短整个过程，就像我们对复选框所做的那样。

于 2015-08-20T22:06:58.000 回答
1

我注意到您的代码中有一些逻辑错误（并为您修复了它们）：

  • .您的选择器上缺少 a $('.extras:checked')。（编辑：仅在您提供的小提琴上，该帖子已被更正）

  • 您设置了$('#rm')两次 onChange 事件处理程序，我认为您的意思$('#bm')是第二次。

现在，除了这些错误之外，这就是您的代码不起作用的原因：

  • 您的代码$('#total').text(total);只运行一次，即页面加载时。因为你直接把它放在里面$(document).ready()。相反，您需要将它放在两个on('change').

这是更正后的代码：

$(document).ready(function(){
    var total;
    var totalextras=0;
    var rmnumber, bmnumber;

    $('.extras').click(function(){
        $('.extras:checked').each(function(){
            // Change to "+=" if you want the number to keep increasing
            totalextras = parseInt($(this).val());
        });

        // Bonus: If you want to re-calculate when checkbox clicked
        total = totalextras + (rmnumber + bmnumber);
        $('#total').text(total);
    });

    $('#rm').on('change',function(){
        rmnumber = parseInt($(this).val());
        total = totalextras + (rmnumber + bmnumber);
        $('#total').text(total);
    });

    $('#bm').on('change',function(){
        bmnumber = parseInt($(this).val());
        total = totalextras + rmnumber + bmnumber;
        $('#total').text(total);
    });

});

小提琴：http: //jsfiddle.net/unf21wak/6/

于 2015-08-20T22:11:08.100 回答