Question

我有一个表格，其中包含带有文本字段和相邻复选框的表格，当选中该复选框时，我需要将已检查的文本数量（金额）相加

金额的总和应显示在

中

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

这主要是你和@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);

});

Answer 3

几个想法：

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

我不确定你的选择器会找到什么。我会console.log()在你的.each()功能中，以确保你进入那里。

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

Answer 4

试试这个：

$('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 5

试试这个，

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

<强> FIDDLE

Answer 6

$(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/

JQuery求和值并更新div内容

6 个答案: