获取选中的复选框并添加到总计

我有三组复选框（serviceA，B＆C），每组有5个复选框，每组都有相同的类名。

我需要计算每个集合的已选中复选框，将它们与a，b，c（每个服务A，B，C的不同值）相乘，并在文本框，div或其他内容中显示所有选择的总和。

到目前为止，我得到了理想的结果，一切正常，但我希望jquery专家告诉我是否有更好的方法，或者更短或更整洁的方式来编写代码。

这是我的代码，也是在jsfiddle ：

HTML：

  serviceA1 
 serviceA2 
 serviceA3 
 serviceA4 
 serviceB1 
 serviceB2 
 serviceB3 
 serviceB4 
 
Total
  ​ 

使用Javascript：

 $(document).ready(function() { $("input:checkbox").click(function(event) { var total = 0; var a = 5; var b = 10; var c = 8; var totalA = 0; var totalB = 0; var totalC = 0; $(".serviceA:checkbox:checked").each(function() { totalA += parseInt($(this).val()); }); $(".serviceB:checkbox:checked").each(function() { totalB += parseInt($(this).val()); }); $(".serviceC:checkbox:checked").each(function() { totalC += parseInt($(this).val()); }); total = totalA*a + totalB*b + totalC*c; if (total == 0) { $('#TotalCost').val('0'); } else { $('#TotalCost').val(total); } }); });​ 

更新：此外，＃TotalCost已经有一个来自页面上其他选项的值，如何将复选框添加到#TotalCost？

新增内容：将接受的答案应用于我的代码后，我现在有了另一个问题。 我的表单上的一个控件是选择：

  Basic Personal Basic Family Advanced Personal Advanced Family  

使用delimeted值中的中间数字是每个选择的成本。 每次用户进行选择时，如何将该成本添加到#cost字段？

Answer 1

我重写了你的例子，以便它添加/减去#TotalCost的值。 这意味着选中/取消选中复选框应正确更新#TotalCost的值，即使#TotalCost的值已从其他位置设置。

 $(document).ready(function() { $("input.serviceA:checkbox").click(function(event) { var total = parseInt($("#TotalCost").val()); if (isNaN(total)) total = 0; if ($(this).attr('checked')) { total += 5; } else { total -= 5; } $("#TotalCost").val(total); }); $("input.serviceB:checkbox").click(function(event) { var total = parseInt($("#TotalCost").val()); if (isNaN(total)) total = 0; if ($(this).attr('checked')) { total += 10; } else { total -= 10; } $("#TotalCost").val(total); }); $("input.serviceC:checkbox").click(function(event) { var total = parseInt($("#TotalCost").val()); if (isNaN(total)) total = 0; if ($(this).attr('checked')) { total += 8; } else { total -= 8; } $("#TotalCost").val(total); }); });​ 

以上几乎可以肯定地得到改善。 例如，如果给定相同类的所有复选框（例如service和value参数）已更新为具有要添加/减去的值：

   serviceA1 
 serviceA2 
 serviceA3 
 serviceA4 
 serviceB1 
 serviceB2 
 serviceB3 
 serviceB4 
 
Total
  ​ 

您可以将代码简化为以下内容：

 $(document).ready(function() { $("input.service:checkbox").click(function(event) { var total = parseInt($("#TotalCost").val()); var value = parseInt($(this).val()); if (isNaN(total)) total = 0; if ($(this).attr('checked')) { total += value; } else { total -= value; } $("#TotalCost").val(total); }); });​ 

Answer 2

你也试试

 $('input.className:checked').length; 

for count total checked checkBox in particuler checkbox class

Answer 3

使用：

 $('[name=serviceA]:checked').length; $('[name=serviceB]:checked').length; $('[name=serviceC]:checked').length; 

如果你想在一起检查

 $('checkbox:checked').length; 

Answer 4

用这个 ：

 $(document).ready(function() { $("input:checkbox").click(function(event) { var total = 0; var a = 5; var b = 10; var c = 8; var totalA = 0; $("input[type=checkbox]:checked").each(function() { totalA = parseInt($(this).val()); if($(this).hasClass('serviceA')){ total +=totalA*a; } if($(this).hasClass('serviceB')){ total += totalA*b; } if($(this).hasClass('serviceC')){ total +=totalA*c; } }); if (total == 0) { $('#TotalCost').val('0'); } else { $('#TotalCost').val(total); } }); });​ 

这里是jsfiddle

或者您可以使用此：

 $(document).ready(function() { $("input:checkbox").click(function() { var total = 0; var a = 5; var b = 10; var c = 8; var lengthA = $(".serviceA:checkbox:checked").length; var lengthB = $(".serviceB:checkbox:checked").length; var lengthC = $(".serviceC:checkbox:checked").length; total += lengthA*a + lengthB *b + lengthC *c; $('#TotalCost').val(total); }); });​ 

这是演示