Question

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

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

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

这是我的代码，同样位于jsfiddle：

HTML：

<html>
<body>
serviceA1 <input type="checkbox" name="serviceA1" id="serviceA1" value="1" class="serviceA" /><br />
serviceA2 <input type="checkbox" name="serviceA2" id="serviceA2" value="1" class="serviceA" /><br />
serviceA3 <input type="checkbox" name="serviceA3" id="serviceA3" value="1" class="serviceA" /><br />
serviceA4 <input type="checkbox" name="serviceA4" id="serviceA4" value="1" class="serviceA" /><br />

serviceB1 <input type="checkbox" name="serviceB1" id="serviceB1" value="1" class="serviceB" /><br />
serviceB2 <input type="checkbox" name="serviceB2" id="serviceB2" value="1" class="serviceB" /><br />
serviceB3 <input type="checkbox" name="serviceB3" id="serviceB3" value="1" class="serviceB" /><br />
serviceB4 <input type="checkbox" name="serviceB4" id="serviceB4" value="1" class="serviceB" /><br />

<p>Total<input type="text" name="TotlCost" id="TotalCost" size="10"/></p>
</body>
</html>

使用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？

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

<select id="symb" class="big" name="symb">
  <option value="1#10#6">Basic Personal</option>
  <option value="2#20#6">Basic Family</option>
  <option value="10#90#12">Advanced Personal</option>
  <option value="11#120#12">Advanced Family</option>
</select>

带有分隔值的中间数的

是每个选择的成本。如何在每次用户进行选择时将该成本添加到#cost字段？

Answer 1

你也试试

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

用于计数总检查复选框，特别是复选框类

Answer 2

使用：

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

如果你想要一起检查

$('checkbox:checked').length;

Answer 3

我重写了您的示例，以便它添加/减去#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参数已更新，可以添加/减去值：

<html>
<body>
serviceA1 <input type="checkbox" name="serviceA1" id="serviceA1" value="5" class="service" /><br />
serviceA2 <input type="checkbox" name="serviceA2" id="serviceA2" value="5" class="service" /><br />
serviceA3 <input type="checkbox" name="serviceA3" id="serviceA3" value="5" class="service" /><br />
serviceA4 <input type="checkbox" name="serviceA4" id="serviceA4" value="5" class="service" /><br />

serviceB1 <input type="checkbox" name="serviceB1" id="serviceB1" value="10" class="service" /><br />
serviceB2 <input type="checkbox" name="serviceB2" id="serviceB2" value="10" class="service" /><br />
serviceB3 <input type="checkbox" name="serviceB3" id="serviceB3" value="10" class="service" /><br />
serviceB4 <input type="checkbox" name="serviceB4" id="serviceB4" value="10" class="service" /><br />

<p>Total<input type="text" name="TotlCost" id="TotalCost" size="10"/></p>
</body>
</html>

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

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

});
});

这是Demo

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

4 个答案: