jQuery，计算文本框值的总和

Question

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

我已经尝试过:只需使用 if 语句为文本框提供值即可。然后为两个文本框指定一个“文本框”类，然后计算它们的总和。我可以使用 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);

});

Answer 1

总计仅在页面加载时计算一次，并且计算结果为 0。您想要做的是在每次输入更改时更新总计。您可以通过将总计设为一个函数，然后从点击回调中调用该函数来实现此目的

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

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

.textboxes{
	width: 30px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
  <input class="textboxes" id="textbox1" /><input id="checkbox1" type="checkbox"/><br />
  <input class="textboxes" id="textbox2" /><input id="checkbox2" type="checkbox" /><br />
</div>
<div><input id="totalSum"></div>