CODEWITHSUNDEEP
jquerycheckbox
bikey77
bikey77

Reputation: 6672

Get selected checkboxes and add to total

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?

Upvotes: 1

Views: 3156

Answers (4)

Affan
Affan

Reputation: 31

you also try

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

for count total checked checkBox in particuler checkbox class

Upvotes: 2

mttrb
mttrb

Reputation: 8345

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);
    });
});​

Upvotes: 1

Nishu Tayal
Nishu Tayal

Reputation: 20830

Use this :

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

});
});​

Here the jsfiddle

Or you can use this :

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

});
});​

Here is Demo

Upvotes: 1

Holger D. Schauf
Holger D. Schauf

Reputation: 147

Use:

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

if you want alle checked together

$('checkbox:checked').length;

Upvotes: 1

Related Questions