1

我有三组复选框（serviceA、B 和 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 字段？

4

4 回答 4

2

你也试试

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

用于计算特定复选框类中选中的复选框的总数

于 2014-08-09T09:42:30.420 回答
1

利用：

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

如果你想一起检查所有

$('checkbox:checked').length;
于 2012-06-20T06:25:54.263 回答
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参数已更新为具有要添加/减去的值：

<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);
    });
});​
于 2012-06-20T06:36:23.043 回答
1

用这个 ：

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

});
});​

这是演示

于 2012-06-20T06:36:25.667 回答