Как правильно считать сумму checkbox и radio?

Question

[CreativeStory]

Привет!
Ни как не могу понять причину неверной отработки функции.
В идеале должен считать сумму, но подсчет ведется только если 2 раза нажать на чекбокс или поле radio. При первом клике пересчитываются старое значение из этого value.

Есть такой

function countTotalSum() {

    var inputItems = document.getElementsByClassName('price-input');
    var sumContainer = document.getElementById('sum');
    var totalSum = 0;

    for (var i = 0; i < inputItems.length; i++) {
        if(document.getElementById('dugi-'+i).checked) {
            totalSum=totalSum+parseInt(document.getElementById('dugi-'+i).value);
            sumContainer.innerHTML = totalSum;
        } 
        
    }

}

Comments

[CreativeStory]

при чем когда в инспекторе запускаешь функцию после выбора пункта - идет верный подсчет.

[Kappy]

html можно? У тебя видимо функция переписывается постоянно.

[CreativeStory]

вот часть формы

<form>
    <input class="price-input" type="radio" name="dugi" id="dugi-0" checked="checked" value="21900">
    <label class="price-label" for="dugi-0" onclick="countTotalSum()">
        <img src="/images/dugi-icon.jpg" alt="">
    </label>
    <input class="price-input" type="radio" name="dugi" id="dugi-1" checked="checked" value="1900">
    <label class="price-label" for="dugi-1" onclick="countTotalSum()">
        <img src="/images/dugi-icon.jpg" alt="">
    </label>
</form>

[Kappy]

CreativeStory, отписался ниже

Answer 1

[Just A Bit]

Как вариант:

<div id="container">
  <input type="checkbox" name="price-input" value="10" onClick="calculate(this);"  />10<br />
  <input type="checkbox" name="price-input" value="20" onClick="calculate(this);" />20 <br />
  <input type="checkbox" name="price-input" value="30" onClick="calculate(this);" />30 <br />
  <input type="checkbox" name="price-input" value="40" onClick="calculate(this);" />40 <br />
</div>
Sum : <span id="sum">0</span>

var total = 0;

function calculate(item) {
  if(item.checked){
    total+= parseInt(item.value);
  } else {
    total-= parseInt(item.value);
  }
  document.getElementById('sum').innerHTML = total;
}

Результат: https://codepen.io/anon/pen/EOQxoB

Comments

[CreativeStory]

Спасибо огромное что натолкнули на мысль!!

Answer 2

[Kappy]

У тебя лэйбл пустой, вынеси функцию onclick в input Чекбокса