Jquery:同一行上的复选框的值与同一行上的文本字段的值

时间:2011-10-01 14:10:53

标签: javascript jquery html

我有一些复选框,其值需要总结。选中复选框后,值将添加到数组中并显示。这是一个演示链接:http://jsfiddle.net/maxwellpayne/gKWmB/ 但是,当我转到一个新行时,它会继续求和我的值,而不是重新开始在行更改时清空数组.HTML代码很长,所以请在提供的链接中查看。

这是总结它们的jquery代码:

var total_array = new Array();
var total_amount = 0;
$("#dailyexpense input[type=checkbox]:checked ").live('change', function() {

    var check_id = $(this).attr('id');
    var valu = $(this).val();
    $("#tdtotals input[type=text]").each(function() {
        totals_id = $(this).attr('id');
        if (totals_id == check_id) {
            total_array.push(valu);
            total_amount = eval(total_array.join('+')).toFixed(2);
            $(this).val(total_amount);
        }

    });
});

所有帮助将不胜感激

PS:然而,正在编辑jsfiddle中的代码并扭曲所有内容,请将其停止。

1 个答案:

答案 0 :(得分:3)

试试这个:

http://jsfiddle.net/gKWmB/3/

基本上我们重新考虑结构。如果复选框值更改,我们将获得其父行。然后我们找到该行中的所有复选框。最后,我们总计并展示。

//watch checkboxes
$('tr input[type=checkbox]').change( function(){   
  var total = 0;
  //total all sibling checkboxes
  $(this).parents('tr').find('input[type=checkbox]:checked').each( function() {
    total += parseInt($(this).val());        
  });

  //display the result
  $(this).parents('tr').find('input[type=text]:last').val(total);
});