Adding checkbox values using Jquery

Question

I am trying to add the checkbox values on button click using Jquery. Please help. I want to display the result in the paragraph.

 <div class="container">
 <input type="checkbox" classname="check" id="one" value="1"> 1 <br>
 <input type="checkbox" classname="check" id="two" value="2"> 2 <br>
 <input type="checkbox" classname="check" id="three" value="3"> 3 <br>
 <input type="checkbox" classname="check" id="four" value="4"> 4 <br>
 <input type="checkbox" classname="check" id="five" value="5"> 5 <br>
 <button type="button" id="button"> Add </button><br>
 <p id="total"></p>
 </div>

Clicking on the ADD button the output should be printed below.

Link to Example

What have you tried so far to do this?

Hoppeduppeanut
– Hoppeduppeanut

2019-04-17 02:24:19 +00:00
Commented Apr 17, 2019 at 2:24 — Hoppeduppeanut
– Hoppeduppeanut, Commented Apr 17, 2019 at 2:24

Johar Zaman · Accepted Answer · 2019-04-17 03:04:05Z

1

On button click event below will give you the total of all the checked checkboxes

var total = 0;
          $('input:checkbox:checked').each(function(){ // iterate through each checked element.
            total += isNaN(parseInt($(this).val())) ? 0 : parseInt($(this).val());
          });

Working Example

edited Apr 17, 2019 at 3:04

Johar Zaman

2,12321 silver badges30 bronze badges

answered Apr 17, 2019 at 2:38

Ashok

7634 silver badges13 bronze badges

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

Comments

Murali Nepalli · Accepted Answer · 2019-04-17 02:50:38Z

0

Please try this code. here is jsfiddle https://jsfiddle.net/yswme32f/4/

var addButton = document.getElementById("button");
var totalP  = document.getElementById("total");

addButton.onclick = function(){
  var total =0; 
  $.each($("input[classname='check']:checked"), function(){            
    total = total + Number($(this).val());
  });
  totalP.innerText = "total value "+ total;    
}

answered Apr 17, 2019 at 2:50

Murali Nepalli

1,61811 silver badges17 bronze badges

1 Comment

Murali Nepalli Over a year ago

@devi I am glad that it worked for you. Please consider marking my answer :).

Collectives™ on Stack Overflow

Adding checkbox values using Jquery

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related