CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Brian Crist
Brian Crist

Reputation: 814

How to sum value of checked changed checkbox jquery?

I have a table, each checkbox contains a value, and I want to sum value of the checkbox.

Example:

Candy and Water is checked : count = 2 , Candy, food and water is checked : count = 5 , checkbox is unchecked : count = 0 . I think i must two event , event of each checkbox (.checkbox1) and event of checkbox (.check_all).

Javascript

      var count = 0;
            $(".checkbox1").change(function() {
                var table_abc = document.getElementsByClassName("checkbox1");
                for (var i = 0; table_abc[i]; ++i) {
                    if (table_abc[i].checked) {
                        count += table_abc[i].value;
                    }
                }
           });

alert(count);

HTML

<table id="div_table">
    <thead>
        <tr>
            <th><input type="checkbox" class="check_all" id="chk_all" /></th>
            <th>Check All</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" class="checkbox1" id="candy" value="2" /></td>
            <td>Candy</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox1" id="food" value="3" /></td>
            <td>Food</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox1" id="water" value="0" /></td>
            <td>Water</td>
        </tr>
    </tbody>
</table>

But it seems not working. Can you tell me how to wrong?

Upvotes: 4

Views: 5197

Answers (5)

Mohamed Badr
Mohamed Badr

Reputation: 2642

First I moved declaration of variable count inside the change function to avoid invalid value in repeating the checked-unchecked

Then you should cast the value of checkbox to a numeric so your summation gives correct values

check this fiddle, it works

Upvotes: 2

ismnoiet
ismnoiet

Reputation: 4159

here is your script, a little bit improved i'm using here the jquery .prop() method to get the checked property of each element, and instead of performing concatenation directly with the value of count you have to use Number(number) or parseInt(number,base) in order to tell js engine, hey i want it to be an arithmetic operation and not a concatenation

here is your snippet of code improved :

$(document).ready(function(){

 var count;

            $(".checkbox1").change(function() {
                count = 0;

                var table_abc = $('.checkbox1');

                for (var i = 0; i < table_abc.length ; ++i) {


                    if ($(table_abc[i]).prop('checked')) {
                        count += parseInt($(table_abc[i]).val(),10);
                    }
                }

            console.log(count);

           });



});

we are logging to the screen the value of count each time a checkbox(with class checkbox1) state is changed

Upvotes: 3

ivan.sim
ivan.sim

Reputation: 9268

You can easily iterate over all your checkboxes using the jquery .each function like this:

(function($){
  $("input[name='opt']").change(function() {
    count = 0;
    $("input[name='opt']").each(function(index, checkbox){
      if(checkbox.checked)
        count += parseInt(checkbox.value) // convert to integer
    })

    alert(count);
  });
})(jQuery);

Few things to pay attention to:

  1. $("input[name='opt']").change binds all the input checkboxes with name='opt' to the provided event handler.
  2. The count variable is moved inside the change event handler, because it needs to be reset to 0 and re-calculated everytime a checkbox is changed.
  3. $("input[name='opt']").each(function(index, checkbox) iterates through all the input checkboxes with name='opt'.
  4. To correctly sum the values, you will need to use parseInt to convert your string value to integer.
  5. Instead of using class="checkbox1", I use name='opt' in my codes to group all the checkboxes together.

Check out this fiddle for complete HTML and JS codes.

Upvotes: 1

Sanjay Panchal
Sanjay Panchal

Reputation: 540

Your javascript code seems wrong. Try following

$(document).ready(function(){
    $(".checkbox1").change(function() {
        var count = 0;
        var table_abc = document.getElementsByClassName("checkbox1");
        for (var i = 0; table_abc[i]; ++i) {
            if (table_abc[i].checked) {
                count += parseInt(table_abc[i].value);
            }
        }
        alert(count);
    });
});

Upvotes: 1

dom
dom

Reputation: 1096

Use below snippets of code

var count = 0;

            $('input[type="checkbox"]').on("change", function() {
               count = 0;
                if($(this).hasClass('check_all')){
                  
                  $('input[type="checkbox"][class="checkbox1"]').prop('checked',true);
                   $('input[type="checkbox"][class="checkbox1"]').each(function(){
                  
                      count += parseInt($(this).val());
                     
                    });
                  
                  }else{
                    $('input[type="checkbox"]:checked').each(function(){
                  
                      count += parseInt($(this).val());
                    });
                  }
              
              alert(count);
           });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="div_table" >
<thead>
<tr>
<th><input type="checkbox" class="check_all" id="chk_all" /></th>
<th>Check All</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="checkbox1"  id="candy" value="2" /></td>
<td>Candy</td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox1"  id="food" value="3" /></td>
<td>Food</td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox1"  id="water" value="0" /></td>
<td>Water</td>
</tr>
</tbody>
</table>

Upvotes: 2

Related Questions