jQuery，计算文本框值的总和

这就是问题所在。我有两个复选框，两个文本框，以及底部的最后一个文本框。我想做的是：选中复选框1时，它旁边的文本框的值为8。选中复选框2时，它旁边的文本框的值为7。最后，最后一个文本框显示文本框的总和，在本例中应为15

我尝试过这样做：只需使用if语句为文本框赋值。然后为这两个文本框指定一个类“textboxs”，并计算它们的总和。我可以用if语句得到值，但不能得到它们的最终和

$(function(){
  $('#checkbox1').click(function(){
    if (this.checked) {
       $('#textbox1').val(7);
    }
  });
  $('#checkbox2').click(function(){
    if (this.checked) {
       $('#textbox2').val(8);
    }
  });

var total = 0;
    $('.textboxes').each(function() {
       total += Number($(this).val());
    });
    $('#totalSum').val(total);

});

---

总计仅在页面加载时计算一次，计算结果为0。您要做的是在每次更改输入时更新总数。您可以通过将total设置为一个函数，然后从click回调调用它来实现这一点

$（函数（）{
$（'#复选框1'）。单击（函数（）{
如果（选中此项）{
$（'#textbox1'）.val（7）；
updateTotal（）；
}
});
$（'#复选框2'）。单击（函数（）{
如果（选中此项）{
$（'#textbox2'）.val（8）；
updateTotal（）；
}
});
函数updateTotal（）{
var合计=0；
$（'.textboxs'）。每个（函数（）{
总数+=数字（$（this）.val（））；
});
$（#totalSum'）.val（总计）；
}
updateTotal（）；
});
.textboxs{
宽度：30px；
}





编辑：更干净、更可扩展的代码（适用于任意数量的动态复选框）：


数据编号属性将添加到复选框中：

<div>
<input type="checkbox" id="checkbox1" data-number="7" />
<input type="text" id="textbox1" />
</div>
<div>
<input type="checkbox" id="checkbox2" data-number="8" />
<input type="text" id="textbox2" />
</div>
<div>
<input type="checkbox" id="checkbox3" data-number="9" />
<input type="text" id="textbox3" />
</div>
<div>
<input type="checkbox" id="checkbox4" data-number="10" />
<input type="text" id="textbox4" />
</div>
<input type="text" id="totalSum" />


@Alex Art-这真的超出了问题的范围。它也不使用ajax、unicorns或rainbows。重点是必须重新计算。是的，我已经有了else语句，但没有把它们放在这里，因为这不是我的问题。尽管如此，我还是给了你一点帮助。@Klisee-我认为你只需要一些重新计算的指导，第一次只发生一次（0）。在这一点上，我相信你可以根据自己的需要对设计进行改进：）这个问题很好地说明了你所面临的问题，限制范围对于提出广受欢迎的问题非常重要。是的，我只需要知道计算。在过去的两个小时里，我一直在努力解决这个问题，所以再次感谢您的快速回答。
<div>
<input type="checkbox" id="checkbox1" data-number="7" />
<input type="text" id="textbox1" />
</div>
<div>
<input type="checkbox" id="checkbox2" data-number="8" />
<input type="text" id="textbox2" />
</div>
<div>
<input type="checkbox" id="checkbox3" data-number="9" />
<input type="text" id="textbox3" />
</div>
<div>
<input type="checkbox" id="checkbox4" data-number="10" />
<input type="text" id="textbox4" />
</div>
<input type="text" id="totalSum" />