CODEWITHSUNDEEP
javascripthtmlcheckbox
user9361778
user9361778

Reputation:

summing up in js with 2 options checked

i have this code in html

<input type="checkbox" value="12" id="logo" checked onchange="calculate(this);">
<input type="checkbox" value="19" id="bc" checked onchange="calculate(this);">
<input type="checkbox" value="200" id="first" onchange="calculate(this);">
<input type="checkbox" value="250" id="second" onchange="calculate(this);">

<p id="total"></p>

and then the js

var total = 0;

function calculate(option) {
    if (option.checked) {
        total += Number(option.value);
    } else {
        total -= Number(option.value);
    }
    document.getElementById("total").innerHTML = total;
}

i need the first two checked checkboxes to sum up from start when page loads and after the behavior of js to get me to 0 or to total of checkboxes when checking respectively unchecking

Upvotes: 0

Views: 108

Answers (4)

Jared Farrish
Jared Farrish

Reputation: 49188

Use a class: 

<input type="checkbox" value="12" id="logo" class='summary' checked>
<input type="checkbox" value="19" id="bc" class='summary' checked>
<input type="checkbox" value="200" id="first" class='summary'>
<input type="checkbox" value="250" id="second" class='summary'>

document.addEventListener('DOMContentLoaded', function() {
    var summerizers = document.querySelectorAll('.summary'),
        counter = document.getElementById('counter');

    for (var i = 0, c = summerizers.length; i < c; i++) {
        summerizers[i].addEventListener('change', count);
    }

    count();

    function count() {
        var total = 0;

        for (var i = 0, c = summerizers.length; i < c; i++) {
            if (summerizers[i].checked) {
                total += parseInt(summerizers[i].value, 10);
            }
        }

        counter.value = total;
    }

});

https://jsfiddle.net/r1khjrsd/

Upvotes: 0

Naga Sai A
Naga Sai A

Reputation: 10975

To achieve expected result, use initial flag checking initial page load and checkTotal function to checked boxes on initial load

Steps:

  1. Function checkedTotal to check all checked checkboxes and call calculate function with boolean value start
  2. If start is true, only add checked checkbox values and restrict else part in calculate functionenter code here

code sample - https://codepen.io/nagasai/pen/XEyqEd?editors=1111

var total = 0;

function calculate(option,start) {
    if (option.checked) {
        total += Number(option.value);
    } else {
        if(!start){
        total -= Number(option.value);
        }
    }
  
    document.getElementById("total").innerHTML = total;
}

function checkedTotal(){
  var checkList = document.getElementsByTagName('input');
  for(var i =0; i < checkList.length; i++){
     calculate(checkList[i], true)
  }
}

checkedTotal()
<input type="checkbox" value="12" id="logo" checked onchange="calculate(this);">
<input type="checkbox" value="19" id="bc" checked onchange="calculate(this);">
<input type="checkbox" value="200" id="first" onchange="calculate(this);">
<input type="checkbox" value="250" id="second" onchange="calculate(this);">

<p id="total"></p>

Upvotes: 0

Cuong Vu
Cuong Vu

Reputation: 3723

You can call the function, then recall the function onchange event. Don't need to pass this as parameter

    function calculate() {
      total = 0;
      elements = document.getElementsByTagName('input');
      for (let i = 0; i < elements.length; i++) {
        if (elements[i].checked) {
          total += Number(elements[i].value); 
        }
      }
      document.getElementById('total').innerHTML = total;
    }
    calculate();
  <input type="checkbox" value="12" id="logo" checked onchange="calculate();">
  <input type="checkbox" value="19" id="bc" checked onchange="calculate();">
  <input type="checkbox" value="200" id="first" onchange="calculate();">
  <input type="checkbox" value="250" id="second" onchange="calculate();">

  <p id="total"></p>

Upvotes: 0

Sebastian Speitel
Sebastian Speitel

Reputation: 7336

You could add an eventlistener to the page loading and just select the options using querySelectorAll("input[type=checkbox]") which selects all checkboxes, iterarate over them and sum them up.

var total = 0;

function calculate(option) {
  if (option.checked) {
    total += Number(option.value);
  } else {
    total -= Number(option.value);
  }
  document.getElementById("total").innerHTML = total;
}

window.addEventListener("load", function() {
  var options = document.querySelectorAll("input[type=checkbox]");
  for (var i = 0; i < options.length; i++) {
    const o = options[i];
    if (o.checked) total += Number(o.value);
  }
  document.getElementById("total").innerHTML = total;
}, false);
<input type="checkbox" value="12" id="logo" checked onchange="calculate(this);">
<input type="checkbox" value="19" id="bc" checked onchange="calculate(this);">
<input type="checkbox" value="200" id="first" onchange="calculate(this);">
<input type="checkbox" value="250" id="second" onchange="calculate(this);">

<p id="total"></p>

Upvotes: 1

Related Questions