Question

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

＆＃13;

$(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);
});

＆＃13;

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

＆＃13;

Answer 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输出。通过遍历每个数字字段类型也缩短了整个事情，就像我们使用复选框一样。

Answer 2

我在你的代码中发现了一些逻辑错误（并为你修复了它们）：

您的.选择器上缺少$('.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/

麻烦简单的jQuery计算器在页面上

2 个答案: