复选框选中jquery时更新总和

时间:2012-06-02 16:09:30

标签: jquery checkbox sum

此处:http://jsfiddle.net/justeric/AWC4U/4/选中一个框将对textfield列中的所有条目求和,并从100中减去该总和,然后将差异放在相应的文本字段中。因此,如果20是textfield列中所有条目的总和,则选中一个复选框将导致在相应的文本字段中填充80(100-20)。此功能正常,但这是我的问题:

如果取消选中复选框,则相应的文本字段应返回零值,而不会影响任何其他文本字段。因此在上面的示例中,80应该返回0而不更改20.此外,每个检查的附加复选框都应该返回文本字段的新总和,包括从上次检查中填充的内容,现在,第一个计算只是保持重新填充对于每个选中的附加复选框。因此,如果复选框的总和是20并且我检查复选框80是否填充在相应的文本字段中并且这是正确的但是如果我检查另一个复选框80再次填充但是现在是错误的,应该填充0,因为100-20-80 = 0。

编辑:

因此,要使与复选框对应的文本字段清晰而不影响其他字段,需要执行以下操作:

$('.textfield').val(function() {
    if($('#' + this.id.replace(/textfield/,'checkbox')).is(':unchecked')){
return 0;}

这会影响所有未选中的复选框,但我希望它仅在选中的复选框更改为未选中时才能生效。因此,该值以直观的方式恢复为0,而不会影响与未选中复选框关联的任何其他文本字段

1 个答案:

答案 0 :(得分:1)

假设您在复选框上有一个类,您可以执行以下操作:

$('.checkbox').not(':checked');

因此,您可以执行更改或单击处理程序:

$('.checkbox').click(function() {
   if ($(this).not(':checked')) {
     // it is unchecked so do your uncheck function
     doUncheckSumFunction();  // you'd define this do what you need it to do

     } 
});

你也可以定义一个uncheck函数:

$('table').on('unchecked', '.checkboxes', function() {
// do the code you want done
});

然后在第一个例子而不是doUnCheckSumFunction()你现在可以做到:

$(this).trigger('unchecked');

更新

要遍历一组元素并执行某些操作,您可以执行以下操作:

var $textareas = $('.textclass');

var sum = 0;
$('.checkbox').each(function(i) {
   if ($(this).not(':checked')) {
     sum = sum + 1;
     // or
     $textareas[i].val(0); //etc
   }
});