JQuery 对值求和并更新 div 内容

Question

我有一个带有文本字段和相邻复选框的 table 表单，当复选框被选中时，我需要对选中的文本字段的数量求和（数量）

金额总和应显示在

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

这是我的试用版，但没有用

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

Answer 1

几个想法：

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

我不确定您的选择器会找到任何东西。我会 console.log() 在你的 .each() 函数中，以确保你进入那里。

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

Answer 2

更改复选框时，解析每个 input[type=text] 获取其值并将它们相加并放入 #total。

$(document).ready(function(){


        $("input[type=text], input[type=checkbox]").on("change keyup", function(){
        var sum = 0;  
        if($("input[type=checkbox]").is(":checked"))
        {
        $("input[type=text]").each(function(){
           sum += +$(this).val();
        });
        }
        $("#total").html(sum);
        });

    });

工作Fiddle

Answer 3

试试这个：

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

演示：

http://jsfiddle.net/de3oovL5/

Answer 4

试试这个，

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

FIDDLE

Answer 5

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

https://jsfiddle.net/someg8od/6/

Answer 6

这主要是您和@void 已经想到的，但这是一个真正的精简版本，可以实现（我认为）您一直在寻找的东西。

http://jsfiddle.net/k1xfehrq/6/

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

});

JQuery 对值求和并更新 div 内容

JQuery sum values and update a div content

checkbox

jquery

sum