Question

所以这就是问题所在。我有两个复选框，两个文本框，底部有一个最终文本框。我要做的是这样：当选中复选框1时，它旁边的文本框的值为8.当选中复选框2时，它旁边的文本框的值为7.最后，最后的文本框显示文本框的总和，在这种情况下应为15。

我试过这个：只需用if语句给出文本框值。然后给一个班级＆＃34;文本框＆＃34;对于两个文本框，只计算它们的总和。我可以使用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.您要做的是每次更改输入时更新总计。您可以通过将total设为一个函数，然后从click回调

中调用它来完成此操作

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

Answer 2

编辑：更清晰，更可扩展的代码（适用于任何动态数量的复选框）：

Fiddle

$(function(){
    $(':checkbox').click(function(){
        var textbox = $(this).next('input[type="text"]');
    if (this.checked) {      
       $(textbox).val($(this).data("number"));
    }
    else{
        $(textbox).val("");
    }      
    calculateTotal();
  });
});

function calculateTotal()
{
    var total = 0;    
    $("input:checked").each(function(){
        var val = $(this).next('input[type="text"]').val();
        total += Number(val);
    });

    $('#totalSum').val(total);
}

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

<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" />

jQuery，计算文本框值的总和

2 个答案: