JQuery求和值并更新div内容

我有一个表格，表格中有文本字段和相邻的复选框，当复选框被选中时，我需要将选中的文本字段的金额相加

金额的总和应显示在

<div id="total" style="color:red">500</div>


<tr class="">
  <td style="font-size:11px; padding:3px">3795</td>
  <td style="font-size:11px; padding:3px"><input type="text" value="" size="6" name="chq_no"></td>
  <td style="font-size:11px; padding:3px"><input type="text" value="0" size="6" name="amount"></td>
  <td style="font-size:11px; padding:3px; width:20px"><input type="checkbox" value="3795" name="id"></td>
</tr>

两个想法：

$('input[type="checkbox"]:checked')...

我不确定你的选择器会找到什么。我会将console.log放在你的.每个函数中，以确保你进入其中

---

其次，确保.val返回的值是整数而不是字符串。也许可以使用parseInt显式强制它。

在更改复选框时，解析每个输入[type=text]获取其值并将其相加，然后将其计入总数

工作

尝试以下方法：

$('input[type="checkbox"]').change(function() {
  var sum = 0;
  if($(this).is(':checked')){
     sum += +$(this).parents('tr:first').find('input[name="amount"]').val();      
  }
  $('#total').html('');
  $('#total').html(sum); 
});

演示：

试试这个

$(':checkbox').on('change', function(){
    var sum = 0;
    $(':text').each(function(){
      sum += parseInt($(this).val(), 10);
    });
    $("#total").html(sum);
});

---

这主要是你和@void已经弄明白的，但这里有一个真正的精简版，我认为它完成了你一直在寻找的东西

---

@mohamed badr，您是否希望在文本输入更新时，只要复选框为：选中，总和就会改变？在定义问题时更清晰一点可能会导致更清晰的解决方案。我需要对所有选择的值求和，这是一种付款形式，您可以选择要付款的项目，因此金额的总和应该在付款前显示。最接近的解决方案在这里，但是如果您取消选中，总金额将恢复为零。它没有添加金额总和。它没有添加金额，请尝试向表中添加另一行。它不会进行总和，它只会显示选中的值。请参阅更新的答案。！如果它解决了你的问题，请考虑投票，并将其标记为正确答案。在这里检查，如果你检查后从任何一个检查，总数将是0我没有得到你？如果最初发布的问题已解决，请对答案进行投票，并将其标记为正确答案。不，问题未解决，请使用复选框，您将发现总和不正确。您要刷新复选框上的总和复选框，或者在选中复选框时用户输入值后立即刷新总和复选框？您是否已在小提琴中对其进行测试？我对自己不起作用。

$('input[type="checkbox"]').change(function() {
  var sum = 0;
  if($(this).is(':checked')){
     sum += +$(this).parents('tr:first').find('input[name="amount"]').val();      
  }
  $('#total').html('');
  $('#total').html(sum); 
});

$(':checkbox').on('change', function(){
    var sum = 0;
    $(':text').each(function(){
      sum += parseInt($(this).val(), 10);
    });
    $("#total").html(sum);
});

$(function(){

function checkChanged(){
    var sum = 0;
    $("input[type='checkbox']:checked")
        .each(function(index, item){
            sum+= Number($(item).parents("tr").find("input[type='text'][name='amount'][value]").val());
    });
    $("#total").html(sum);
}

    $("table").on("click", "input[type='checkbox']", checkChanged);
});

$(document).ready(function () {

    function sumRows() {
        var sum = 0,
            total = $('#total');
        $('tr').each(function () {
            var amount = $(this).find('input[name="amount"]'),
                checkbox = $(this).find('input[name="include"]');
            if (checkbox.is(':checked') && amount.val().length > 0) {
                sum += parseInt(amount.val(), 10);
            }
        });
        total.text(sum);
    }

    // calculate sum anytime checkbox is checked or amount is changed
    $('input[name="amount"], input[name="include"]').on('change keyup blur', sumRows);

});