Home/ Questions/Q 8118651
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T04:33:25+00:00

I have three sets of checkboxes (serviceA, B & C) with 5 checkboxes each,

  • 0

I have three sets of checkboxes (serviceA, B & C) with 5 checkboxes each, each set having the same class name.

I need to count the checked checkboxes of each set, multiply them with a,b,c (different value for each service A,B,C) and display the sum of all selections in a textbox, div or whatever.

So far I’m getting the desired result and it all works ok but I’d like the jquery experts to tell me if there’s a better way or maybe a shorter or even tidier way to write the code.

Here’s my code, also at 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);
        }
    });
});​

UPDATE: Also, #TotalCost already has a value from other selections on the page, how do I add the checkboxes total to #TotalCost?

NEW ADDITION: After applying the accepted answer to my code, I now have another question. One of the controls on my form is a select:

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

with the middle number in the delimeted value is the cost of each selection. How can I add that cost to the #cost field each time the user makes a selection?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I have rewritten your example so that it adds/subtracts from the value in #TotalCost. This means that checking/unchecking the checkboxes should update the value in #TotalCost correctly, even if the value in #TotalCost has been set from somewhere else.

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

});​

    The above can almost certainly be improved. For example, if all the checkboxes where given the same class, e.g. service and the value parameter was updated to have the value to be added/subtracted: 

    <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>​

    You could simplify the code to the following:

    $(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);
    });
});​
    • 0