Totalling selected checkbox values in Jquery

Question

I am calculating totals when a particular check boxes are being checked. The code is working fine. How can i view the grandtotal of all the item values if none of the checkboxes are checked.?

   $(function () {
   $("input[type='checkbox'").on("click", function () {
       recalcTotal();
    });

   function recalcTotal() {
        var total = 0;

        $("input:checked").each(function () {
            total += $(this).next("input").val() * 1;
        });

        $("#total").val(total);
    }
});

<input type="checkbox" name="values"/><input type="text" readonly value="100"/> <br />
<input type="checkbox" name="values" /><input type="text" readonly value="200"/> <br />
<input type="checkbox" name="values" /><input type="text" readonly value="300"/> <br />
<input type="checkbox" name="values" /><input type="text" readonly value="400"/> <br />
<input type="checkbox" name="values" /><input type="text" readonly value="500"/> <br />
<input type="checkbox" name="values" /><input type="text" readonly value="600"/> <br /><br />
<b>Grand Total:</b> <input type="text" id="total" readonly/> <br />

Explain How can i view the grandtotal of all the item values if none of the checkboxes are checked.? — void
– void, Commented Nov 19, 2015 at 7:27
As of now there are some rows of textboxes with values like 100, 200, 300 etc. So the query is if i check any checkboxes it sums up and show the totals in the grand total field. Now if i dont select any checkboxes, its should total the complete field vales and show in grandtotal.. — Sanju Menon
– Sanju Menon, Commented Nov 19, 2015 at 7:30

Milind Anantwar · Accepted Answer · 2015-11-19 07:33:42Z

1

You can simply modify the handler to iterate over checked and non checked based on number of checked elements count.also note that:

1) you should also parse the value using parseInt() in each loop:

2) use change event instead of click.

3) use .change() to trigger change after attaching event. This will populate total sum in beginning.

$("input[type='checkbox'").on("change", function () {
   recalcTotal();
}).change();

function recalcTotal() {
 var total = 0;
 var checkedinput = $("input:checked");
 var targetcheckboxes = checkedinput.length ? checkedinput : $("input:checkbox");
 targetcheckboxes.each(function () {
    total += parseInt($(this).next("input").val(),10) * 1;
 });

 $("#total").val(total);
}

Working Demo

edited Nov 19, 2015 at 7:33

answered Nov 19, 2015 at 7:27

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sanju Menon Over a year ago

It is working fine. How will i make the grand total to 3 decimals?

Sanju Menon Over a year ago

Its not totaling correctly with decimals. For example. I changed the values with 3 decimals. But in the total its not calculating the decimals. It is just putting .000 with the totals...

Milind Anantwar Over a year ago

@SanjuMenon: share the code. you may need to use parseFloat instead of parseInt

Sanju Menon Over a year ago

Yes i should use parseFloat. Its working fine. Thank you @ Milind.

Sanju Menon Over a year ago

There is a small issue when i tried the code in the production environment. For example. the text field values are generated depending on some calculations from another field and its generated from another javascript function. Now wen i put the above code its not showing the totals without any checkbox click. May be onchange there is some problem? Do i need to change it?

|

Collectives™ on Stack Overflow

Totalling selected checkbox values in Jquery

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related